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

使用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都写在选择器内

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