回到顶部
使用延迟,减少浏览器符合,功能更友好
页面滚动一定距离显示和隐藏
css
* {
margin: 0;
padding: 0;
}
.totop_wrap {
display: none;
position: fixed;
bottom: 100px;
right: 30px;
padding: 20px 10px;
background: #ccc;
color: #fff;
}
html
<div class="totop_wrap js_totop_wrap">
回到顶部
</div>
js
<!--jquery-->
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<!--javascript-->
<script type="text/javascript">
$(function() {
/**
* 回到顶部
* 使用延迟,减少浏览器负荷,增加用户友好
* */
var gtTimer = 0;
$(window).scroll(function() {
if(gtTimer) {
clearTimeout(gtTimer);
gtTimer = 0;
}
gtTimer = setTimeout(function() {
var srollTop = $(document).scrollTop();
if(srollTop > 500) {
$('.js_totop_wrap').fadeIn(300);
} else {
$('.js_totop_wrap').fadeOut(300);
}
}, 300);
});
});
</script>