自动返回顶部的实现

来源:互联网 发布:sqlserver 实例名称 编辑:程序博客网 时间:2024/06/02 07:14

在页面内容很多的情况,添加按钮实现自动返回顶部的功能

1.首先,你需要一个返回顶部的按钮,一个div或者a标签亦可

html部分:<div class="toTop" title="返回顶部"></div>
css部分:(less写法)
.toTop {
width: 50px;
height: 50px;
background: url(../img/toTop.png) no-repeat;
background-size: 100%;
position: fixed;
right: 30px;
bottom: 80px;
z-index: 99;

&:hover{
cursor: pointer;
opacity: .85;
}
}

2.然后加入你的jquery代码,实现返回顶部的操作,就这样简单
$(".toTop").click(function() {
$("html,body").animate({
"scrollTop": "0px"
}, "slow");
});
原创粉丝点击