超简单实用的回到顶部

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

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

html代码：
[cc lang=”html” escaped=”true”]<a href=”#” class=”back-to-top”></a>[/cc]
js代码：
[cc lang=”javascript” escaped=”true”]<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>
[/cc]
css样式：
[cc lang=”css” escaped=”true”]<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>
[/cc]

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