返回顶部效果!

最新推荐文章于 2022-03-09 19:59:21 发布

Bright2017

最新推荐文章于 2022-03-09 19:59:21 发布

阅读量452

点赞数 1

分类专栏：网页中用到过的效果

网页中用到过的效果专栏收录该内容

138 篇文章

订阅专栏

本文介绍两种使用jQuery实现网页返回顶部效果的方法。一种是通过动态创建并定位按钮，另一种则是固定位置的链接。当页面滚动到顶部时隐藏按钮，点击按钮快速返回顶部。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

刚刚需要为网页添加一个返回顶部的效果，又懒得自己写，百度了一下找到两个还不错的。这里分享给大家。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta name="toTop" content="true">
	<meta charset="UTF-8">
	<title>返回顶部</title>
	<style>
		html{
			height:3000px;
		}
	</style>
	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	<script type="text/javascript">
		jQuery(document).ready(function($) {	
			if($("meta[name=toTop]").attr("content")=="true"){
				$("<div id='toTop'><img src='img/1.png'></div>").appendTo('body');
				$("#toTop").css({
					width: '50px',
					height: '50px',
					bottom:'10px',
					right:'15px',
					position:'fixed',
					cursor:'pointer',
					zIndex:'999999',
				});
				if($(this).scrollTop()==0){
						$("#toTop").hide();
					}
				$(window).scroll(function(event) {
					/* Act on the event */
					if($(this).scrollTop()==0){
						$("#toTop").hide();
					}
					if($(this).scrollTop()!=0){
						$("#toTop").show();
					}
				});	
				$("#toTop").click(function(event) {
					/* Act on the event */
					$("html,body").animate({
						scrollTop:"0px"},
							666
						)
				});
			}
		});
	</script>
</head>
<body>
	<div>向下滚动查看效果</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta name="toTop" content="true">
	<meta charset="UTF-8">
	<title>返回顶部</title>
	<style>
		html{
			height:3000px;
		}
		#to_top{width:25px;padding:5px; height:82px; font:14px/20px arial; text-align:center;  background:#06c; position:absolute; cursor:pointer; color:#fff;}
	</style>
	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	<script type="text/javascript">
		$(function(){
			var oTop = document.getElementById("to_top");
            var screenw = document.documentElement.clientWidth || document.body.clientWidth;
            var screenh = document.documentElement.clientHeight || document.body.clientHeight;
            oTop.style.left = screenw - oTop.offsetWidth-50 + "px";
            oTop.style.top = screenh - oTop.offsetHeight + "px";
            window.onscroll = function () {
                var scrolltop = document.documentElement.scrollTop || document.body.scrollTop;
                oTop.style.top = screenh - oTop.offsetHeight + scrolltop-60 + "px";
            }
            oTop.onclick = function () {
                document.documentElement.scrollTop = document.body.scrollTop = 0;
            }
		});
	</script>
</head>
<body>
	<div id="to_top">返回顶部</div>
</body>
</html>

预览地址：http://www.bright2017.top/test1/test1-06/

预览地址：http://www.bright2017.top/test1/test1-07/