JQuery回到顶部(Scroll to Top)

貌似微博开始火的时候，回到顶部越来越多地被使用了，加上回到顶部的按钮，可以让用户在浏览完一个页面之后快速地返回顶部导航。如果你的网站底部没有相关导航的话这个效果就会非常实用。

原理其实很简单，获取滚动条到页面顶部的距离，到某个数值之后显示回顶按钮，点击回顶按钮时，让滚动条返回页面顶部。

做了个简单的Demo，样式部分使用了css3，所以使用现代浏览器看到的效果会好些哦。

猛击查看演示Demo

HTML代码

<p id="back-top"><a href="#top"><span></span>Back to Top</a></p>

Javascript代码

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
	//隐藏 #back-top 先
	$("#back-top").hide();
	// 滚动条距顶100px显示 #back-top
	$(function () {
		$(window).scroll(function () {
			if ($(this).scrollTop() > 100) {
				$('#back-top').fadeIn();
			} else {
				$('#back-top').fadeOut();
			}
		});
		// 点击事件 回到顶部
		$('#back-top a').click(function () {
			$('body,html').animate({
				scrollTop: 0
			}, 600);
			return false;
		});
	});
 
});
</script>