Question

我有一个JS可以从页面底部到顶部进行平滑滚动，并且可以正常工作：

<script>

     $("a[href='#top']").click(function() {
     $("html, body").animate({ scrollTop: 0 }, "slow");
     return true;
  });
</script>

但是现在我想从上到下进行平滑滚动，我尝试了这个：

 <script>

     $("a[href='#footer']").click(function() {
     $("html, body").animate({ scrollToBottom: 0 }, "slow");
     return true;
  });
</script>`

它不起作用，它不是一个平滑的卷轴。有谁知道这有什么问题？

Answer 1

使用纯JS：

     window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' })

，顶部为：

     window.scrollTo({ top: 0, behavior: 'smooth' })

Answer 2

没有scrollToBottom之类的东西。试试这个：

$("html, body").animate({ scrollTop: document.body.scrollHeight }, "slow");

Answer 3

// Scroll smoothly to the bottom
domElement.scrollTo({
  top: document.body.scrollHeight,
  behavior: 'smooth',
})

scrollTo 的所有选项是：

top: number
left: number
behavior: 'smooth' 或 behavior: 'auto'

Answer 4

要获得更全面的平滑滚动方法列表，请参阅我的回答 here。

要滚动到页面底部，可以将 y 位置设置为 document.scrollingElement.scrollHeight。

为了在精确的时间内滚动到某个位置，可以使用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.querySelector('button').addEventListener('click', function(e){
  scrollToSmoothly(document.scrollingElement.scrollHeight, 1000);
});

html, body {
  height: 5000px;
}

<button>Scroll to bottom</button>

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

smoothScroll({yPos: 'end', duration: 1000});

document.querySelector('button').addEventListener('click', function(e){
  smoothScroll({yPos: 'end', duration: 1000});
});

html, body {
  height: 5000px;
}

<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>Scroll to bottom</button>

JS用于平滑滚动到页面底部

4 个答案: