jQuery实现页面内平滑回到顶部的过程分析及实现方法

jQuery可以实现一些很绚丽的网页效果，比如淡入淡出还有滑动效果等，它的动画自定义也很强大，animate()功能很出色，今天奶牛跟大家一起来看看那些网页中的回到顶部或者回到底部如何用jQuery来实现平滑滚动。

首先，我们需要知道，我们的滚动要到达的目的地，比如一个页面内的元素，我们要知道它距离窗口顶部的位置。这样子，比如我们的header的id就是header，footer的id就是footer。那么我们可以通过offset()方法来获得一个top跟left值。

  

   
$('#header').offset() 
   
$('#footer').offset() 

因为我们需要的是页面上下滚动，所以我们只需要offset()方法来获得的top值

  

   
$('#header').offset().top 
   
$('#footer').offset().top 

现在目的地已经有了，那么我们将来实现到达目的地的方法，就是scrollTop()方法，这个方法在没有参数的情况下，返回一个当前滚动距离top顶端的值，如果scrollTop(value)的话，我们将直接滚动到页面的那个位置

  

   
$(window).scrollTop($('#header').offset().top) 
   
$(window).scrollTop($('#footer').offset().top) 

这样子的实现太过僵硬，因为是直接到达目的地，所以我们下一步就是为它添加动画效果

  

   
$('html').animate({scrollTop:$('#header').offset().top},800); 
   
$('html').animate({scrollTop:$('#footer').offset().top},800); 

其中的800是动画持续的时间，在持续时间之后我们还可以增加’ swing‘或者’linear’

  

   
$('html').animate({scrollTop:$('#header').offset().top},800,'swing');  
   
$('html').animate({scrollTop:$('#footer').offset().top},800,'linear');  

具体效果可以自己测试下，linear是匀速的运动，默认是swing

这样子，我们需要的功能就已经实现了。比如你可以固定一个元素并未其进行监听，然后当点击的时候执行上面的jquery代码。

  

   
$(document).ready(function(){ 
   
    $('#scroll').hide(); 
   
    $(window).scroll(function() { 
   
        if($(window).scrollTop() >= 100){ 
   
            $('#scroll').fadeIn(400); 
   
        } 
   
        else 
   
        { 
   
            $('#scroll').fadeOut(200); 
   
        } 
   
}); 

下面的一段代码可以实现，当页面的滚动超过100px的时候，就会展现id为scroll的元素，如果不超过的话就隐藏。

参考文章：

http://docs.jquery.com/CSS

http://docs.jquery.com/CSS/scrollTop

http://api.jquery.com/offset/

http://api.jquery.com/scrollTop/

http://api.jquery.com/animate/