jquery返回顶部

jquery返回顶部

如图，当点击蓝色按钮时，网页返回顶部。并且是缓慢上去，而不是一瞬间直接到达最上部。

html很简单，只有一个div.

<div class="back"></div>

css:注意刚开始处于页面最上部，所以图片一开始是隐藏的，并且位置固定，用position:fixed即可。

.back{
			width: 57px;
			height: 57px;
			position: fixed;
			right: 10px;
			bottom: 10px;
			background-image: url(./images/back.png);
			display: none;
<span style="white-space:pre">	</span>}

主要思想是：当点击按钮时，让窗口高度慢慢减少，一直到窗口对象scrollTop值为0，当窗口小到一定程度，将图片隐藏，当高于某一个特定值时再显示。

jquery:

<script type="text/javascript" src="./js/jquery-1.5.2.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			var back = $('.back');

			back.click(function(){
				//用setInterval可以设置每20ms就时窗口高度减少50，一直到
				//窗口已经到最上部，此时把timer清除
				var timer = setInterval(function(){
					$(window).scrollTop($(window).scrollTop()-50);
					if($(window).scrollTop() == 0){
						clearInterval(timer);
					}
				},20);
			});

			//当窗口在滚动是，高度小于250就隐藏按钮
			$(window).scroll(function(){
				if($(window).scrollTop() < 250){
					back.hide(50);
				}else{
					back.show(50);
				}
			});
		});
	</script>