带有动态效果得返回顶部

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

HTML:

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

JS:

<script type="text/javascript">
		/*ie9以上(包括)*/
		$(function(){
			$(document).scroll(function(){
				//页面滚动，按钮出现
				$(".toTopBtn").show();
					
				//如果滚动到最上面，按钮将会消失
				if($(document).scrollTop() == 0) {
					$(".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>