jquery返回顶部--滑动底部显示出

知秋~

已于 2022-06-14 14:42:17 修改

阅读量570

点赞数

文章标签：返回顶部-

于 2018-04-08 21:18:02 首次发布

本文链接：https://blog.csdn.net/qq_38881495/article/details/79858127

版权

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>jquery返回顶部</title>
		<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
		<style>
			.wrap {
				height: 2000px;
			}

			.red {
				background: red;
				height: 600px;
			}

			.green {
				background: green;
				height: 600px;
			}

			.yellow {
				background: yellow;
				height: 800px;
			}

			#back-top {
				position: fixed;
				width: 60px;
				height: 60px;
				bottom: 30px;
				right: 30px;
				background: #ccc;
				text-align: center;
				line-height: 60px;
				text-decoration: none;
			}
		</style>
	</head>
	<body>
		<div class="wrap">
			<div class="red">
				测试
			</div>
			<div class="green">
				测试
			</div>
			<div class="yellow">
				测试
			</div>
		</div>
		<a href="#" id="back-top">Top</a>


		<script>
			$(function() {


				//先将#back-top隐藏
				$('#back-top').hide();


				//当滚动条的垂直位置距顶部100像素一下时，跳转链接出现，否则消失
				$(window).scroll(function() {
					if ($(window).scrollTop() > 100) {
						$('#back-top').fadeIn(1000);
					} else {
						$("#back-top").fadeOut(1000);
					}
				});


				//点击跳转链接，滚动条跳到0的位置，页面移动速度是1000
				$("#back-top").click(function() {
					$('body').animate({
						scrollTop: '0'
					}, 1000);
					return false; //防止默认事件行为
				})
			})
		</script>


	</body>
</html>

知秋~

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
jquery返回顶部--滑动底部显示出

&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset="utf-8"&gt;&lt;title&gt;jquery返回顶部&lt;/title&gt;&lt;script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"&gt;&
复制链接

扫一扫