javascript - 在javascript中平滑滚动？

Question

在 jQuery 中你可以做这样的事情

$('html, body').stop().animate({
    'scrollTop': $target.offset().top
}, 1000);

我对如何只用 Javascript 处理这个感兴趣？

谢谢!

Answer 1

这个问题通常通过使用 setInterval/setTimeout 并以微小增量滚动元素的函数来回答，参见:Cross browser JavaScript (not jQuery...) scroll to top animation

我想提出另一种更现代的方法，使用动态添加的 CSS 过渡，这应该更流畅且更少占用 CPU。它使用 CSS 为 body 设置动画，JavaScript 仅在元素上计算和设置 translateY() 转换。 CSS 动画完成后，转换将被移除并设置滚动位置。

演示:http://jsfiddle.net/00uw1Lq9/4/ (跨浏览器修复后更新了链接)。

仅适用于具有无前缀转换和转换的浏览器(在 IE11、当前的 Chrome 和 Firefox 中测试)，对于旧版本，您可能需要添加前缀检测。它也可能在某些方面被破坏，将其视为起点，而不是解决方案。

// this function self-initializes and attaches an event listener to the root element
var smoothScroll = (function(root){
     //keep track of the target element between scrolling function and transitionend callback
     var targetElement;
    // called when the CSS transition finishes
    root.addEventListener('transitionend', function(e){
        // remove transition and transform
        root.style['transition'] = '';
        root.style['transform'] = '';
        // do the actual scrolling
        targetElement.scrollIntoView();
    });
    // this function fill be available as the smoothScroll function
    return function(element, time){
        // get the top position of target element
        var offset = element.offsetTop - root.scrollTop;
        // if the element is very low it can't get scrolled up to the top of the window
        offset = Math.min( offset, root.offsetHeight - document.documentElement.clientHeight );
        // save reference to the target element for callback
        targetElement = element;
        // set transfor/transition CSS properties
        root.style['transition'] = 'transform';
        root.style['transition-duration'] = time;
        // this fakes the scrolling animation by animating transform on the element
        root.style['transform'] = 'translateY(' + offset * -1 +'px)';
    }
}(document.body));

用法:smothScroll( DOMNodeReference, time )，其中 time 是对 CSS transition-duration 属性有效的字符串(例如 '300ms' 或 '2.5s').