滚动条缓动滚回顶部事件

最新推荐文章于 2024-04-04 09:49:14 发布

原创最新推荐文章于 2024-04-04 09:49:14 发布 · 875 阅读

0 ·

CC 4.0 BY-SA版权

Web前端专栏收录该内容

6 篇文章

订阅专栏

本文探讨了如何实现网页滚动条在用户交互下以平滑缓动的方式回到顶部的效果，增加了用户体验。通过JavaScript和CSS实现这种动画效果，并讨论了相关技术细节。

// 原生JS
window.onload 
= function () {
document.getElementById("btn").onclick
= function () {
timer = setInterval(function () {
var scrollTop 
= window.pageYOffset || document.documentElement.scrollTop
|| document.body.scrollTop 
|| 0;
var speed 
= -100;
if (scrollTop 
== 0) {
clearInterval(timer);
}
// 兼容写法:
// document.documentElement.scrollTop = document.body.scrollTop = window.pageYOffset = scrollTop + speed;
document.body.scrollTop = scrollTop 
+ speed;
}, 30)
}
}


// JQ 写法
$(function () {
$("#btn").click(function(){
$('body,html').animate({scrollTop:0},1000);
return false;
});
});