开发小技巧：超简单的“回到顶端”按钮实现

为什么80%的码农都做不了架构师？>>>   

日期：2013-3-26  来源：GBin1.com

之前的文章中我们曾发表过另外一个back to top的插件 ：jQuery Back to Top，喜欢的朋友可以点击来看。

今天我们介绍的这篇web开发小技巧将使用jQuery实现一个超简单的滚动到页面顶端的功能，代码如下：

$(document).ready(function() {
	// 滚动窗口来判断按钮显示或隐藏
	$(window).scroll(function() {
		if ($(this).scrollTop() > 150) {
			$('.back-to-top').fadeIn(100);
		} else {
			$('.back-to-top').fadeOut(100);
		}
	});
	
	// jQuery实现动画滚动
	$('.back-to-top').click(function(event) {
		event.preventDefault();
		$('html, body').animate({scrollTop: 0}, 500);
	})
});

基本上不用太多解释，大家应该理解代码功能。

首先使用window对象的scroll回调函数来控制当页面向下滚动超过150px的时候，显示back to top按钮，否则隐藏。......

via 极客社区

来源：开发小技巧：超简单的“回到顶端”按钮实现

转载于:https://my.oschina.net/gbin1/blog/122937