滚动到顶部,Class名为go-top的点击事件:
jQuery('.go-top').on('click', function (e) {
e.preventDefault();
jQuery('html, body').animate({ scrollTop: 0 }, duration);
return false;
})
滚动到底部,Class名为go-bottom的点击事件:
jQuery('.go-bottom').on('click', function (e) {
var t = document.body.clientHeight;
window.scroll({ top: t, left: 0, behavior: 'smooth' });
})
我们发现上们滚动到底部代码虽简单,但没有滚动动画,于是我们优化一下
jQuery('.go-bottom').on('click', function (e) {
(function smoothscroll() {
const currentScroll = document.documentElement.scrollTop || document.body.scrollTop; // 已经被卷掉的高度
const clientHeight = document.documentElement.clientHeight; // 浏览器高度
const scrollHeight = document.documentElement.scrollHeight; // 总高度
if (scrollHeight - 10 > currentScroll + clientHeight) {
window.requestAnimationFrame(smoothscroll);
window.scrollTo(0, currentScroll + (scrollHeight - currentScroll - clientHeight) / 2);
}
})();
})
参考资料:
SegmentFault 思否 – js实现滚动条滑动到底部