Jquery实现一键返回顶部
一、需求分析
当用户浏览的网页过于长的时候，用户在浏览到网页底部想要在返回顶部需要滚动好几次滚轮才能返回顶部，不仅麻烦，而且用户体验也会很差。现在的大多是页面都会在页面顶部或者是页面的可见区域的某一位置固定一个按钮，点击它可以使页面返回顶部，用户再也不用滚动滚轮了。下面本站的返回顶部的效果，分享给大家：
二、示例代码
HTML代码：
<!-- Back to the top start --> <div id="Back-to-the-top"><i class="layui-icon layui-icon-top"></i></div> <!-- Back to the top end -->
CSS代码
#Back-to-the-top {
width: 50px;
height: 50px;
position: fixed;
right: 50px;
bottom: 25%;
background-color: #FFF;
cursor: pointer;
display: none;
}
#Back-to-the-top .layui-icon {
font-size: 50px;
color: #333;
}Jquery代码：
// 返回顶部
window.onscroll = function() {
scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
$("#Back-to-the-top").css("display",(scrollTop >= 300) ? "block" : "none");
};
$("#Back-to-the-top").click(function(){
var timer = setInterval(function() {
window.scrollBy(0, -450);
if (scrollTop == 0)
clearInterval(timer);
}, 50);
});好文章记得分享哦！
