回到顶部按钮

最新推荐文章于 2020-11-28 22:40:01 发布

水中熊

最新推荐文章于 2020-11-28 22:40:01 发布

阅读量426

点赞数 1

分类专栏： javascript 文章标签：优化

本文链接：https://blog.csdn.net/gmd_web/article/details/48655159

版权

javascript 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

为页面做回到顶部按钮是很有必要的，而要实现这个功能要满足两个要求，一、当浏览器下拉时按钮显示，回到顶部时按钮隐藏；二、点击按钮时，通过jquery的animate函数滑到顶部。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
<style type="text/css">
#container{width: 500px; height: 5000px; background-color: #ccc;}
#sideToolbar{display: block;position: fixed;bottom: 10%;right: 2%;}
#sideToolbar-up {display: block;width: 45px;height: 45px;margin-left: 10px;}
#sideToolbar:not(.on){display:none!important;}
</style>
<title></title>
</head>
<body>
	<div id="container" style=""></div>
	<div id="sideToolbar">
     	<a id="sideToolbar-up" href="javascript:void(0)" title="返回顶部">返回顶部</a>
	</div>
</body>
<script type="text/javascript">
	//显示按钮
	window.onscroll = function(){ //元素滚动时执行
		var sideToolbar = $("#sideToolbar");//定义变量
		
		if((document.body.scrollTop||document.documentElement.scrollTop)>50){
			sideToolbar.addClass("on"); //判断滚动条超过50时执行显示
		}else{
			sideToolbar.removeClass("on"); //否则隐藏
		}
	}
	//点击事件
	$("#sideToolbar-up").click(function(){
		$("html,body").animate({ scrollTop: 0 }, 800); //滑动
	});
</script>
</html>