带有动态效果得返回顶部

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


你可能感兴趣的:(javascript)