超简单实用的回到顶部

WEB前端

简单实用的回到顶部,可以直接复制使用。

html代码:

1
<a href="#" class="back-to-top"></a>

js代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script src="js/jquery-1.11.3.min.js"></script>
<script>
$(window).scroll(function() {
console.log($(this).scrollTop());
if ($(this).scrollTop() > 100) { //设置距离顶部高度
$('.back-to-top').fadeIn();
} else {
$('.back-to-top').fadeOut();
}
});
$('.back-to-top').click(function() {
$("html, body").animate({scrollTop: 0}, 1000);
return false;
});
</script>

css样式:

1
2
3
4
5
6
7
8
9
10
11
<style type="text/css" >
.back-to-top{width: 40px;
height: 50px;
position: fixed;
bottom: 0px;
right: 20px;
display: none;
background: rgba(63,170,217,0.7);
text-align: center;
z-index: 10000;}
</style>

来源:超简单实用的回到顶部

发表评论

电子邮件地址不会被公开。 必填项已用*标注