“回到顶部”-带缓动效果，附JS源码

对于特别长的网页，通常需要一个“回到顶部”按钮。

经常有人分享这个简单的效果，但是往往找不到，最近项目中用到了，所以分享并记录下来。

带有缓动效果，主要是使用jQuery中的animate 方法实现的。

首先肯定要引入jQuery了，引入方法请百度

$(document).ready(function(e) {
	//页面滚动事件
    $(window).scroll(function(){
		//获取窗口已滚动的高度
		var windowScrollTop=$(window).scrollTop();
		var oTools=$("#tools");
			//如果大约100PX，就渐显出“回到顶部”，否则即隐藏
			if(windowScrollTop>100)
			{
				oTools.fadeIn();
				}else{
						oTools.fadeOut();
					}
		});
		
	$("#back_top").click(function(){
		//点击“回到顶部”，滚动到顶部，并带动画效果
			$("html,body").animate({scrollTop:0},1000);
		});	
});

实现思路：

1、“回到顶部”工具栏默认是隐藏的

2、当页面滚动时触发滚动事件，并判断当页面滚动距离大于100PX，就渐显出工具栏，小于100px即隐藏

3、点击“回到顶部”即调用动画，滚动会顶部

demo