超简单实用的回到顶部

WEB前端 JS开发 2015年7月10日

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

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>

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

发表回复