使用js实现回到页面顶部

最新推荐文章于 2024-03-19 10:15:00 发布

原创最新推荐文章于 2024-03-19 10:15:00 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js 页面回到顶部 #javascript

js效果专栏收录该内容

1 篇文章

订阅专栏

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>