使用 scrollIntoView 实现 JavaScript 平滑滚动效果

Question

好的，我正在尝试获取一个页面（两个 div），主要是一个启动画面，当您单击“进入站点”时，它将平滑地向下滚动到“主站点”，但是它会跳转到它，而不是平滑滚动到元素。

如果没有这种跳跃效果，我怎样才能让它平滑地滚动到那个元素？

这是我的一个片段：

 splash = document.getElementById('intro'); content = document.getElementById('content'); function enterSite() { content.scrollIntoView({ behaviour: "smooth" }); }

 body { font-family: 'Archivo Narrow', sans-serif; margin: 0 auto; width: 100%; height: 100%; } html, body { overflow: hidden; } main { width: 100%; height: 100%; position: relative; } #intro { background-image: url(https://i.imgsafe.org/51d0cf26df.jpg); background-repeat: no-repeat; background-size: cover; display: flex; text-align: center; height: 100%; } #splash { margin: auto; width: 40%; background-color: rgba(56, 56, 56, 0.4); border-radius: 50px 50px; } #splash-p { width: 70%; font-size: 1.2em; line-height: 1.5em; margin: auto; text-align: center; padding-top: 10px; color: #fff; } .btn { width: 35%; margin: auto; margin-top: 10px; margin-bottom: 10px; } /* Main Content Page */ article { position: absolute; width: 100%; height: 100%; background-color: red; }

 <div id="intro"> <div id="splash"> <p id="splash-p">Just a load of text repeated</p> <input type="image" src="Images/Button.png" class="btn" onclick="enterSite()" /> </div> </div> <article id="content">Just a load of text repeated</article>

如果您单击按钮，它将跳转到下一个 div，但我需要它平滑滚动而不是跳转到下一个 div，使用纯 javascript，我看过的其他地方似乎都有插件或使用 jquery。

Answer 1

如果你不想直接跳跃，你应该以某种方式为滚动设置动画。
在 jQuery 的帮助下，这很容易：

$("html, body").animate({ scrollTop: $([ELEMENT]).position().top }, 1000);

看看这个小提琴： https : //jsfiddle.net/8501ckvn/

---

jQuery 解决了很多跨浏览器问题，但如果您正在寻找纯 javascript解决方案，Stackoverflow 上已经有很多答案，即查看Smooth scroll anchor links WITHOUT jQuery 。

Answer 2

你的content.scrollIntoView({behaviour: "smooth"}); 应该有效，但是，我认为“行为”是拼写行为。

我确实开发了一种使用 TypeScript 平滑滚动的方法，但是您应该能够很容易地转换为 JS：

查看 stackoverflow 答案

Answer 3

对于用于平滑滚动的方法更全面的列表，请参阅我的答案在这里。

---

要在精确的时间内滚动到某个位置，可以使用window.requestAnimationFrame ，每次计算适当的当前位置。 当不支持requestAnimationFrame时，可以使用setTimeout达到类似的效果。

/*
   @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) { var elem = document.querySelector("div"); scrollToSmoothly(elem.offsetTop); }); document.getElementById("toTop").addEventListener('click', function(e){ scrollToSmoothly(0, 700); });

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

对于更复杂的情况，可以使用SmoothScroll.js 库，它处理垂直和水平平滑滚动、在其他容器元素内部滚动、不同的缓动行为、从当前位置相对滚动等等。

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

 <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="toTop">Scroll back to top</button> </div>

或者，您可以将选项对象传递给window.scroll ，它滚动到特定的 x 和 y 位置，以及window.scrollBy从当前位置滚动一定量：

// Scroll to specific values
// scrollTo is the same
window.scroll({
  top: 2500, 
  left: 0, 
  behavior: 'smooth' 
});

// Scroll certain amounts from current position 
window.scrollBy({ 
  top: 100, // could be negative value
  left: 0, 
  behavior: 'smooth' 
});

演示：

 <button onClick="scrollToDiv()">Scroll To Element</button> <div style="margin: 500px 0px;">Div</div> <script> function scrollToDiv(){ var elem = document.querySelector("div"); window.scroll({ top: elem.offsetTop, left: 0, behavior: 'smooth' }); } </script>

现代浏览器支持scroll-behavior CSS 属性，可用于使文档中的滚动平滑（无需 JavaScript）。 锚标签可用于此目的，方法是为锚标签提供#的href加上要滚动到的元素的id ）。 您还可以为特定容器（如div设置scroll-behavior属性，以使其内容平滑滚动。

演示：

 html, body{ scroll-behavior: smooth; }

 <a href="#elem">Scroll To Element</a> <div id="elem" style="margin: 500px 0px;">Div</div>

Answer 4

假设您也有 JQuery。

您可以使用以下 JQuery 代码来获得平滑的滚动效果

function enterSite(){
    $('html, body').stop().animate({
        scrollTop: $('#content').offset().top
    }, 1500);
});

让我知道它是否有效