javascript将div滚动到具有平滑滚动效果的视图中？答案

【问题标题】：javascript scroll div into view with smooth scroll effect?javascript将div滚动到具有平滑滚动效果的视图中？
【发布时间】：2015-06-17 14:59:33
【问题描述】：

当用户单击 div 时，我正在使用以下 javascript 代码将我的 div 滚动到视图中。

    <script>
    function showDiv2() {
   document.getElementById('about').style.display = "none";
   document.getElementById('terms').style.display = "none";
   document.getElementById('breaker').style.display = "block";
   document.getElementById('contact_us').style.display = "block";
   document.getElementById( 'contact_us' ).scrollIntoView('slow');
}
</script>

这段代码工作并将 div 滚动到视图中，但没有任何效果，而不是页面平滑滚动到我的 div 它有点只是跳转到 div。有没有一种方法可以让我顺利并缓慢地向下滚动到我的 div？谢谢

【问题讨论】：

只要谷歌“JavaScript 平滑滚动”就会有很多例子

标签： javascript scroll

【解决方案1】：

根据Element.scrollIntoView() documentation 试试这个：

element.scrollIntoView({block: "end", behavior: "smooth"});

但您必须记住，这是一项实验性功能，仅在 Firefox 中有效

【讨论】：

根据文档，scrollIntoView() 的高级（带选项）版本在其他浏览器中不受支持，但支持基本版本
@suvroc 谢谢，但我确实需要跨浏览器兼容的东西

【解决方案2】：

更全面的平滑滚动方法列表见我的回答here。

要在准确的时间内滚动到某个位置，可以使用window.requestAnimationFrame，每次计算适当的当前位置。要滚动到某个元素，只需将 y 位置设置为 element.offsetTop。

/*
   @param pos: the y-position to scroll to (in pixels)
   @param time: the exact amount of time the scrolling will take (in milliseconds)
*/
function scrollToSmoothly(pos, time) {
    var currentPos = window.pageYOffset;
    var start = null;
    if(time == null) time = 500;
    pos = +pos, time = +time;
    window.requestAnimationFrame(function step(currentTime) {
        start = !start ? currentTime : start;
        var progress = currentTime - start;
        if (currentPos < pos) {
            window.scrollTo(0, ((pos - currentPos) * progress / time) + currentPos);
        } else {
            window.scrollTo(0, currentPos - ((currentPos - pos) * progress / time));
        }
        if (progress < time) {
            window.requestAnimationFrame(step);
        } else {
            window.scrollTo(0, pos);
        }
    });
}

演示：

function scrollToSmoothly(pos, time) {
    var currentPos = window.pageYOffset;
    var start = null;
    if(time == null) time = 500;
    pos = +pos, time = +time;
    window.requestAnimationFrame(function step(currentTime) {
        start = !start ? currentTime : start;
        var progress = currentTime - start;
        if (currentPos < pos) {
            window.scrollTo(0, ((pos - currentPos) * progress / time) + currentPos);
        } else {
            window.scrollTo(0, currentPos - ((currentPos - pos) * progress / time));
        }
        if (progress < time) {
            window.requestAnimationFrame(step);
        } else {
            window.scrollTo(0, pos);
        }
    });
}

document.getElementById("toElement").addEventListener("click", function(e){
  scrollToSmoothly(document.querySelector('div').offsetTop, 500 /* milliseconds */);
});
document.getElementById("backToTop").addEventListener("click", function(e){
  scrollToSmoothly(0, 500);
});

<button id="toElement">Scroll To Element</button>
<div style="margin: 1000px 0px; text-align: center;">Div element
  <button id="backToTop">Scroll back to top</button>
</div>

也可以使用SmoothScroll.js library，它支持滚动到页面上的一个元素，除了更复杂的功能，例如垂直和水平平滑滚动，在其他容器元素内滚动，不同的缓动行为，相对滚动当前位置等。

document.getElementById("toElement").addEventListener("click", function(e){
  smoothScroll({toElement: document.querySelector('div'), duration: 500});
});
document.getElementById("backToTop").addEventListener("click", function(e){
  smoothScroll({yPos: 'start', duration: 500});
});

<script src="https://cdn.jsdelivr.net/gh/LieutenantPeacock/SmoothScroll@1.2.0/src/smoothscroll.min.js" integrity="sha384-UdJHYJK9eDBy7vML0TvJGlCpvrJhCuOPGTc7tHbA+jHEgCgjWpPbmMvmd/2bzdXU" crossorigin="anonymous"></script>
<button id="toElement">Scroll To Element</button>
<div style="margin: 1000px 0px; text-align: center;">Div element
  <button id="backToTop">Scroll back to top</button>
</div>

【讨论】：