匿名聊天,Jquery完成一键回来顶部,那些花儿

频道:我们的头条 日期: 浏览:206

一、需求剖析

当用户阅读的网页过于长的时分,用户在阅读到网页底部想要在回来顶部需求翻滚好几次滚轮才干回来顶部,不只费事,并且用户体会也会很差。现在的大多是页面都会在页面顶部或者是页面的可见区域的某一方位固定一个按钮,点击它可以使页面回来顶部,用户再也不必翻滚滚轮了。下面本站的回来顶部的作用,共享给我们:


Jquery


二、示例代码

HTML代码:




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);
});

好文章记住共享哦!

热门
最新
推荐
标签