带有动态效果得返回顶部

全栈程序员站长

发布于 2022-09-14 11:13:18

1.1K0

发布于 2022-09-14 11:13:18

文章被收录于专栏：全栈程序员必看

大家好，又见面了，我是你们的朋友全栈君。

之前做“返回顶部”，一直都是无动态效果的。瞬间就回到了顶部。这次写一个带有动态效果的。也就是利用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>

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/158412.html原文链接：https://javaforall.cn

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022年7月1，如有侵权请联系 cloudcommunity@tencent.com 删除

https