使用 JavaScript 而不是 jQuery 在按钮单击时滚动屏幕的顶部/底部 它应该适用于 chrome、IE 和 mozilla

Question

我想在单击按钮时实现一个简单的顶部和底部滚动。在所有浏览器中滚动应该是平滑的。

要求 -

我在页面上有两个按钮，在页面顶部有一个名为Down的按钮，点击它应该向下到页脚 div。

页面底部还有一个名为UP 的按钮，点击它应该从屏幕向上。

我尝试了一种解决方案，但在 IE 中，滚动不流畅。我们如何才能使所有浏览器的滚动行为流畅。

目前我在 CSS 中使用了 scroll-behavior 属性，但这是一个好习惯吗？有没有办法用 JavaScript 而不是 CSS 来做到这一点？

html{
  scroll-behavior: smooth;
}

注意：它也应该在 IE 中工作。

我将衷心感谢您的帮助。

代码的 codepen 链接 - https://codepen.io/Akkanksha1/full/KKgWmgL

Answer 1

该解决方案是用 ECMAScript 5 编写的，用于requestAnimationFrame()将步骤计算与屏幕帧速率同步。它也适用于 IE 和现代浏览器。它实现了该easeInOutCubic功能，并且可以扩展以支持其他缓动功能。

function getProgress(_ref) {
  var duration = _ref.duration,
      runTime = _ref.runTime;
  var percentTimeElapsed = runTime / duration;

  function easeOutCubic(x) {
      return x < 0.5 ? 4 * x * x * x : 1 - Math.pow(-2 * x + 2, 3) / 2 ;
  }

  return easeOutCubic(percentTimeElapsed);
};

function getTotalScroll(_ref) {
  var scrollableDomEle = _ref.scrollableDomEle,
      elementLengthProp = _ref.elementLengthProp,
      initialScrollPosition = _ref.initialScrollPosition,
      scrollLengthProp = _ref.scrollLengthProp,
      direction = _ref.direction;
  var totalScroll;

  var documentElement = document.documentElement;
  totalScroll = documentElement.offsetHeight;
  
  return !!~['left', 'top'].indexOf(direction) ? initialScrollPosition : totalScroll - initialScrollPosition;
};

function smoothScroll(_ref2) {
  var scrollableDomEle = window,
      direction = _ref2.direction,
      duration = _ref2.duration,
      scrollAmount = window.outerHeight - window.innerHeight;
  var startTime = null,
      scrollDirectionProp = null,
      scrollLengthProp = null,
      elementLengthProp = null,
      scrollDirectionProp = 'pageYOffset';
      elementLengthProp = 'innerHeight';
      scrollLengthProp = 'scrollHeight';

  var initialScrollPosition = scrollableDomEle[scrollDirectionProp];
  var totalScroll = getTotalScroll({
    scrollableDomEle: scrollableDomEle,
    elementLengthProp: elementLengthProp,
    initialScrollPosition: initialScrollPosition,
    scrollLengthProp: scrollLengthProp,
    direction: direction
  });

  if (!isNaN(scrollAmount) && scrollAmount < totalScroll) {
    totalScroll = scrollAmount;
  }

  var scrollOnNextTick = function scrollOnNextTick(timestamp) {
    var runTime = timestamp - startTime;
    var progress = getProgress({
      runTime: runTime,
      duration: duration
    });

    if (!isNaN(progress)) {
      var scrollAmt = progress * totalScroll;
      var scrollToForThisTick = direction === 'bottom' ? scrollAmt + initialScrollPosition : initialScrollPosition - scrollAmt;

      if (runTime < duration) {
        var xScrollTo = 0;
        var yScrollTo = scrollToForThisTick;
        window.scrollTo(xScrollTo, yScrollTo);

        requestAnimationFrame(scrollOnNextTick);
      } else {
        var _scrollAmt = totalScroll;
        var scrollToForFinalTick = direction === 'bottom' ? _scrollAmt + initialScrollPosition : initialScrollPosition - _scrollAmt;
        var _xScrollTo = 0;
        var _yScrollTo = scrollToForFinalTick;
        window.scrollTo(_xScrollTo, _yScrollTo);
      }
    }
  };

  requestAnimationFrame(function (timestamp) {
    startTime = timestamp;
    scrollOnNextTick(timestamp);
  });
};


function scrollToTop() {
  smoothScroll({ duration: 2000, direction: 'top' });
}

function scrollToBottom() {
  smoothScroll({ duration: 2000, direction: 'bottom' });
}

document.getElementById('scroll-to-bottom').addEventListener('click', scrollToBottom);
document.getElementById('scroll-to-top').addEventListener('click', scrollToTop);

.container {
  position: relative;
  height: 1000px;
  background-color: red
}

#scroll-to-bottom {
  position: absolute;
  top: 0px;
}

#scroll-to-top {
  position: absolute;
  bottom: 0px;
}

<div class="container">
  <button id="scroll-to-bottom">Scroll to bottom</button>
  <button id="scroll-to-top">Scroll to top</button>
</div>