您的位置：首页 > Web前端 > JavaScript

使用js实现回到页面顶部

2016-12-07 14:56 501 查看

1.说明：本次效果为滚动离页面顶部一段距离后，页面右下角出现一个小箭头，点击其后即可回到页面顶部

2.小箭头来源：使用了font awesome的箭头图标

3.若不求效果的话，那么可以之引入JQuery文件，小箭头就不使用，而是用“回到顶部”替代

4.HTML内容

<link rel="stylesheet" href="../bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="../css/font-awesome.css">

<script src="../js/jquery.min.js"></script>
<script src="../bootstrap/js/bootstrap.js"></script>
<!--保证小箭头的位置固定在页面右下角，且给小箭头设置背景颜色和其本身的颜色-->
<style type="text/css">
#back-to-top1{
position:fixed;
bottom:20px;
right:20px;
width:20px;
display:none;
border:1px solid #f4645f;
background: #f4645f;
color:#fff;
}
</style>
<body style="height:2000px">
<a href="#top" id="back-to-top1"><i class="fa fa-chevron-up fa-lg"></i></a>
<script type="text/javascript">
$(document).bind('scroll',function(){
var len = $(this).scrollTop();
if(len >= 100){
$("#back-to-top1").show();
}else{
$("#back-to-top1").hide();
}
});
$("#back-to-top1").click(function(e){
e.preventDefault();
$('body').animate({scrollTop:0},1000);
});
</script>
</body>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航