对于特别长的网页,通常需要一个“回到顶部”按钮。
经常有人分享这个简单的效果,但是往往找不到,最近项目中用到了,所以分享并记录下来。
带有缓动效果,主要是使用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、点击“回到顶部”即调用动画,滚动会顶部