《返回顶部》淡入淡出平滑返回顶部的效果核心函数

使用a标签做返回顶部的的触发点时，

发现a标签包含的内容会多出链接下划线

在css内使用text-decoration:none;可以隐藏掉a标签内的链接下划线

jquery 内窗口滚动监测函数：scroll()（第一个重要函数）

使用方法：

例：监测浏览器窗口的滚动

1 $(window).scroll(function(){
2    //xxxx  当浏览器窗口向下或向上滚动时要执行的内容 
3 })

监测id是aaa的div内滚动条滚动

1 $('#aaa').scroll(function(){
2     //xxxx  滚动时要执行的内容
3 })

滚动时要获取匹配元素相对于滚动条顶部的偏移值就使用到了另一个jquery函数：scrollTop();//scrollLeft()距离左端偏移值，横向滚动条

$(window).scrollTop();

$('$aaa').scrollTop();
//同上例

$(window).scroll(function(){
     var t = $(this).scrollTop();
     if(t > 200){
         $('.top').fadeIn();
     }else{
         $('.top').fadeOut();
     }
})

根据获取到的偏移值来设定返回顶部的a标签的显示和隐藏，给a标签加入淡入淡出特效函数 fadeIn();淡入fadeOut();淡出

这时会出现一个bug，当快速的滑上滑下时，因为淡入淡出是一个缓慢展现的动画所以当快速的上下滑动时就会出现滑动停止了，但是a标签还在淡入淡出，动画没有执行完毕是不会停止的。

此时我们就用到另一个函数：stop(); //停止正在执行的动画

代码就变成了

$(window).scroll(function(){
     var t = $(this).scrollTop();
     if(t > 200){
         $('.top').stop().fadeIn();
     }else{
         $('.top').stop().fadeOut();
     }
})

bug消除。

给返回顶部的a标签加入点击事件前一定要把a标签内的herf变为javascript:;

1 <a href="javascript:;" class="top">∧</a>

用于阻止a标签的跳转

加入点击事件后，最后要做的就是在点击事件内执行向上滚动的事件：animate();(第二个重要核心函数)

animate()函数内有两个参数

animate({scrollTop:0},300);

这里

scrollTop:0 代表的是滚动条滚动至距离头部0px距离的位置//{scrollLeft:0}距离左端0px的距离同理

300 代表的是滚动时需要多长时间来完成

当前含义就是

用300毫秒的时间使滚动条滚动至距离头部0px的位置

$('body,html').stop().animate({scrollTop:0},300);

这里说个注意点，在控制浏览器的滚动条时，因为各个浏览器的内核不同所以控制的最外层元素也就不同，但不管是那个内核的浏览器，不是针对body就是针对html，所以在这里如果是针对浏览器窗口滚动条的话，为保证各个浏览器都兼容，把body和html都写在选择器内

这样，返回顶端的核心函数就讲完了