回到顶部按钮

关注

原创最新推荐文章于 2026-08-11 11:35:09 发布 503 阅读 AI 写同款· GEO 优化 ›

实现具有jQuery的网页“回到顶部“按钮除了实现滚动的平滑过渡外，jQuery还提供了fadeIn()和fadeOut()方法来控制元素的显示与隐藏，通过淡入淡出效果，增加用户体验的友好度。fadeIn()和fadeOut()方法能够控制元素的透明度，从完全不可见到可见或从可见到不可见，通过CSS的opacity属性变化实现。结合这些动画方法，我们可以创建一个更加动态和吸引人的回到顶部按钮：// 初始时隐藏按钮// 当用户滚动页面超过200px时显示按钮} else {}); 阅读详情

为页面做回到顶部按钮是很有必要的，而要实现这个功能要满足两个要求，一、当浏览器下拉时按钮显示，回到顶部时按钮隐藏；二、点击按钮时，通过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>

收录于