带有动态效果得返回顶部

最新推荐文章于 2022-10-24 12:10:39 发布

老米的世界

最新推荐文章于 2022-10-24 12:10:39 发布

阅读量1k

点赞数

分类专栏： javascript 文章标签：返回顶部

本文链接：https://blog.csdn.net/MPFLY/article/details/78275746

版权

javascript 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

之前做“返回顶部”，一直都是无动态效果的。瞬间就回到了顶部。这次写一个带有动态效果的。也就是利用animate方法来实现。下面是具体代码。

HTML:

<body>
	<div class="content">
		<p>这是测试文档</p>
		...
		<p>这是测试文档</p>
	</div>
	<button class="toTopBtn" >回到顶部</button>
</body>

JS:

<script type="text/javascript">
	/*ie9以上(包括)*/
	$(function(){
		// 页面滚动监听
		$(window).scroll(function(){
			var sc = $(window).scrollTop(); // 距离顶部的距离
			//距离顶部的距离超过900px，[回到顶部]按钮出现，否则消失
			if (sc > 900) {
		      	$(".toTopBtn").show();
		    } else {
				$(".toTopBtn").hide();
		    }
		});
		
		// 点击回到顶部按钮
		$(".toTopBtn").click(function(){
			//此处无动态效果，瞬间回到顶部
			$(document).scrollTop(0);

			//此处利用animate动画添加动态效果
			$('html').animate({scrollTop:0},300);
		});
	});
</script>

CSS:

<style type="text/css">
	.toTopBtn {
		display: none;
		position: fixed;
		bottom: 30px;
		right: 20px;
		width: 50px;
		height: 50px;
		font-size: 12px;
		text-align: center;
		background-color: #0033FF;
		cursor: pointer;
		font-weight: 600;
		border-radius: 8px;
	}
</style>

老米的世界

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
带有动态效果得返回顶部

之前做“返回顶部”，一直都是无动态效果的。瞬间就回到了顶部。这次写一个带有动态效果的。也就是利用animate方法来实现。下面是具体代码。HTML:<body> <div class="content"> <p>这是测试文档</p> ... <p>这是测试文档</p> </div> <button class="toTopBtn
复制链接

扫一扫