jQuery 页面滚动到指定位置显示返回顶部按钮

最新推荐文章于 2022-11-04 11:23:15 发布

ZPD_zpd

最新推荐文章于 2022-11-04 11:23:15 发布

阅读量795

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/ZPD_zpd/article/details/111571695

版权

功能实现：
1、页面开始时没有返回顶部按钮。
2、页面滚动到指定位置以下，显示返回顶部按钮。
3、返回顶部按钮，固定在页面。
4、点击返回顶部按钮后，页面回到顶部。
5、页面回到顶部后，返回顶部按钮隐藏。

需要了解的知识：

jquery方法：

$().scrollTop()

匹配元素相对滚动条顶部的偏移。

属性:

scrollTop属性

滚动条到顶部的垂直高度，可写可读。

在这里插入图片描述

HTML

<body>
	<div id="toTop">回到顶部</div>
</body>

CSS

body {
	height: 2000px;
}

#toTop {
	width: 50px;
	height: 50px;
	background-color: #008000;
	font-size: 18px;
	text-align: center;
	/* 固定定位 */
	position: fixed;
	bottom: 20px;
	left: 100px;
	/* 隐藏 */
	display: none;
}

jQuery

<script src="../jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	$(window).scroll(function() {
		// 获取滚动条的垂直滚动值
		var scrolltop = $(window).scrollTop();

		// 垂直滚动值大于500时，显示回到顶部，否则隐藏
		if (scrolltop >= 500) {
			$("#toTop").show();
		} else {
			$("#toTop").hide();
		}
	});

	// 点击回到顶部,将html或body的scrollTop属性值设为0
	$("#toTop").click(function() {
		$("html,body").stop().animate({
			"scrollTop": "0px"
		});
	});
</script>

ZPD_zpd

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
jQuery 页面滚动到指定位置显示返回顶部按钮

功能实现：1、页面开始时没有返回顶部按钮。2、页面滚动到指定位置以下，显示返回顶部按钮。3、返回顶部按钮，固定在页面。4、点击返回顶部按钮后，页面回到顶部。5、页面回到顶部后，返回顶部按钮隐藏。需要了解的知识：jquery方法：$().scrollTop()匹配元素相对滚动条顶部的偏移。属性:scrollTop属性滚动条到顶部的垂直高度，可写可读。HTML<body> <div id="toTop">回到顶部</div></b
复制链接

扫一扫