[英]JS Smooth scrolling, scroll to bottom of final / bottom div instead of top
[英]JS for smooth scroll to the bottom of the page
我有一个 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>`
它不起作用,它不是一个平滑的滚动。 有谁知道这是怎么回事?
使用纯 JS:
window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' })
并到顶部为:
window.scrollTo({ top: 0, behavior: 'smooth' })
没有scrollToBottom
这样的东西。 尝试这个:
$("html, body").animate({ scrollTop: document.body.scrollHeight }, "slow");
// Scroll smoothly to the bottom
domElement.scrollTo({
top: document.body.scrollHeight,
behavior: 'smooth',
})
scrollTo
所有选项是:
top: number
left: number
behavior: 'smooth'
或behavior: 'auto'
对于用于平滑滚动的方法更全面的列表,请参阅我的答案在这里。
要滚动到页面底部,可以将 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 库,它可以处理更复杂的情况,例如垂直和水平平滑滚动、在其他容器元素内部滚动、不同的缓动行为、从当前位置相对滚动等等。
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>
接受的答案和其他答案是正确的,但想添加另一个可能对某人有帮助的用例。
在某些情况下,您需要在setTimeout()
的回调中进行短暂延迟的滚动。
function scrollToBottom() {
window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
}
setTimeout(function() { scrollToBottom(); }, 100);
例如:您有一个<button>
,它在单击时将<div>
元素添加到页面底部,并且您想要滚动到底部以便用户可以看到这个新的 div。 在这种情况下,有时(取决于事件循环行为),您需要在setTimeout()
内进行滚动,因为触发滚动的相同操作实际上会更改document.body.scrollHeight
的值。 通过延迟它,您可以让它在添加 div 后使用document.body.scrollHeight
的新更新值。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.