返回顶部模仿天猫的返回顶部代码 HTML JQuery CSS JavaScript

最新推荐文章于 2024-10-27 22:24:41 发布

爱死费崇政

最新推荐文章于 2024-10-27 22:24:41 发布

阅读量6k

点赞数 2

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/fay462298322/article/details/68942855

JavaScript 同时被 3 个专栏收录

16 篇文章

订阅专栏

html

9 篇文章

订阅专栏

css

7 篇文章

订阅专栏

本文分享了一个模仿天猫网站返回顶部功能的实现方法。通过HTML、CSS和jQuery，作者详细展示了如何创建一个平滑滚动回顶部的效果，并附带了完整的代码示例。

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

关于返回顶部这个功能，绝大部分网站都有用到，算是一个细节方面的小东西，个人觉得天猫的返回顶部这个小东西做的挺好，下面便是我模仿它的代码：

HTML：

</!DOCTYPE html>
<html>
<head>
	<title>返回顶部,模仿某猫</title>

	<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body id="page">
	<h1>返回顶部</h1>
	<h2>返回顶部</h2>
	<h3>返回顶部</h3>
	<h4>返回顶部</h4>
	<h5>返回顶部</h5>
	<h1>返回顶部</h1>
	<h2>返回顶部</h2>
	<h3>返回顶部</h3>
	<h4>返回顶部</h4>
	<h5>返回顶部</h5>
	<h1>返回顶部</h1>
	<h2>返回顶部</h2>
	<h3>返回顶部</h3>
	<h4>返回顶部</h4>
	<h5>返回顶部</h5>
	<h1>返回顶部</h1>
	<h2>返回顶部</h2>
	<h3>返回顶部</h3>
	<h4>返回顶部</h4>
	<h5>返回顶部</h5>
	<h1>返回顶部</h1>
	<h2>返回顶部</h2>
	<h3>返回顶部</h3>
	<h4>返回顶部</h4>
	<h5>返回顶部</h5>
	<script type="text/javascript" src="jquery.min.js"></script>
	<script type="text/javascript" src="script.js"></script>
</body>
</html>

CSS：

#gotoTop {
	box-sizing: border-box;
	display: none;
	position: fixed;
	bottom: 10%;
	right: 20px;
	cursor: pointer;
	padding: 9px 2px;
	width: 40px;
	height: 40px; text-align : center;
	border: 1px solid #e0e0e0;
	z-index: 99;
	background: #000
		url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEYAAABGCAYAAABxLuKEAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo3QkQzNTRERUVBNUUxMUUzODcyNzk2RTM5MkZCREQ2OSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo3QkQzNTRERkVBNUUxMUUzODcyNzk2RTM5MkZCREQ2OSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjdCRDM1NERDRUE1RTExRTM4NzI3OTZFMzkyRkJERDY5IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjdCRDM1NERERUE1RTExRTM4NzI3OTZFMzkyRkJERDY5Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+tblnnAAAAPBJREFUeNrs10EWgiAUBdDgtCP3vwTWRE2YlJXfo0F038iJHs/li49Ua73IcxIYMGDAgAEDBgwYMGDACBgwYMCAAQMGTDillHbZXiRF7l+W5ZT3yoMsUH1x3S15MJRhcHLnz6gGweaH+YDSHScPjNIVJw+O0g1nlL+SHvOmx+zK7D1muIABAwYMGDAT9pitjfbeO1KwAadI+23PNzEn5XrUgx5Xqk3EhhVMwfNRWmu+O89gJgYMmB/ZY76YeuTp3MT8wcSs/pVMjM0XjD0m2HBNzNSnazBgwFAAAwYMGDBgwIABAwaMgAEDBgyY7rkJMABdBLUSAt7mFQAAAABJRU5ErkJggg==");
	background-size: 100% auto;
	text-align: center;
}

#gotoTop {
	_position: absolute;
	_top: expression(documentElement.scrollTop + documentElement.clientHeight * 3/
		4 + "px")
}

#gotoTop.hover {
	background: #165ec5
		url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEYAAABGCAYAAABxLuKEAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpBOEREMTlCMUU5MzExMUUzOUM1NEZEOUMyNkQ2RTcxRiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpBOEREMTlCMkU5MzExMUUzOUM1NEZEOUMyNkQ2RTcxRiI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjRGQzkyQjVDRTkzMTExRTM5QzU0RkQ5QzI2RDZFNzFGIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkE4REQxOUIwRTkzMTExRTM5QzU0RkQ5QzI2RDZFNzFGIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+jXerwwAAAiJJREFUeNrsmMtKw0AUhptaCra2qC24E1ddCAVdiCC4c+XW22OIID6EK1/DS9fiWhREQUERFyIquBHvtVaLtv6DJzDEqU0hbWrzH/hIk5lMky9zkpmxKpVKiPE7LIqhGIqhGIqhGIqhGIqhGIqhGAbFUAzFUAzFUAzFUAzFeBy9YFV+z4EHigmFOkAWHMr+MDgGX0EXsw8GQFr278AlGAmqmH6QlJ4ScZR9Ss95AddBE7MGZmrUWQezflxcxIf/VO+TQZBxUTcjL+NTee+0dY/ZAFN1npMD0+0uZhyM1XnOLtjmAI8DPIqhGIqhGIrxInZAXH6XQBF0gqgcU/sToACWwShIgLCjnTLIgz2wJG3mZJsw/G9emGxVMW4a6wbPMkcaqlH3SOZM6pxHN/fj1Y2EPe6BKZklKxbk2KJ2LCUTQxWv2hQh7SDrqFMW6WeGuopzlw/Ft7mSvsB0q23v/3goF+DNUVY0PDhL0tPUVsnL3tKIHqNH3LGtlnY9hrKeKqlpNTqFmiGmERFu1n1E/pGUgixXfBjKokEWY0lqvRvKbsBTUMXEwIn2xfIlZ1s1mjZM91NMWEsDU2qYrq9p1+tnKtnvihVt0GdH0lGnYZ9lP8TY45euGuXzLtqwe0pfO4hRw/fN0M8Kvym2ZBQbqzKJVKPhA21kq9q64rID12MohmIohmIohkExFEMxFEMxFEMxFEMxFEMxDIqhGIrxKL4FGABymv1Q2e/c3AAAAABJRU5ErkJggg==");
	text-decoration: none;
	background-size: 100% auto;
}

.fay-tip:hover p{
	display:block;
	transform-origin: 100% 0%;

	-webkit-animation: topFadeIn 0.4s ease-in-out;
	animation: topFadeIn 0.4s ease-in-out;
}

.fay-tip p{
	display:none;
	background-color: #494949;
	padding: 10px;
	width: 80px;
	position: absolute;
	box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
	right: 38px;
	color: #FFF;
	font-size: 13px;
	line-height: 1.4;
	top:0;
	margin: 0 0 10px;
}

.fay-tip p:before{
	position: absolute;
	content: '';
	width:0;
	height: 0;
	border:6px solid transparent;
	border-bottom-color:#494949;
	right:-12px;
	top:10px;
	border-color: transparent transparent transparent #494949;
}

.fay-tip p:after{
	width:100%;
	height:40px;
	content:'';
	position: absolute;
	top:0;
	left:80px;
}

@-webkit-keyframes topFadeIn {
	0% { 
		right:80px;
		opacity:0; 
		transform: scale(0.6);
	}

	100% {
		right:38px;
		opacity:100%;
		transform: scale(1);
	}
}

@keyframes topFadeIn {
	0% {
		right:80px;
		opacity:0; 
	}
	100% {
		right:38px;
		opacity:100%; 
	}
}

JS：

gotoTop();

function gotoTop(min_height) {
	// 预定义返回顶部的html代码，它的css样式默认为不显示
	var gotoTop_html = '<div id="gotoTop" class="fay-tip"><p>返回顶部</p></div>';
	// 将返回顶部的html代码插入页面上id为page的元素的末尾
	$("#page").append(gotoTop_html);
	$("#gotoTop").click(// 定义返回顶部点击向上滚动的动画
	function() {
		$('html,body').animate({
			scrollTop : 0
		}, 700);
	}).hover(// 为返回顶部增加鼠标进入的反馈效果，用添加删除css类实现
	function() {
		$(this).addClass("hover");
	}, function() {
		$(this).removeClass("hover");
	});
	// 获取页面的最小高度，无传入值则默认为600像素
	min_height ? min_height = min_height : min_height = 0;
	// 为窗口的scroll事件绑定处理函数
	$(window).scroll(function() {
		// 获取窗口的滚动条的垂直位置
		var s = $(window).scrollTop();
		// 当窗口的滚动条的垂直位置大于页面的最小高度时，让返回顶部元素渐现，否则渐隐
		if (s > min_height) {
			$("#gotoTop").fadeIn(100);
		} else {
			$("#gotoTop").fadeOut(200);
		}
	});
}

至于jQuery就不用介绍了，基本上大家都了解，希望帮助那些纠结于实现返回顶部的朋友们。