ScrollTo：平滑滚动到页面指定位置

JavaScript

ScrollTo是一款基于jQuery的滚动插件，当点击页面的链接时，可以平滑地滚动到页面指定的位置。

适用在一些页面内容比较多，页面长度有好几屏的场合，例如城市选择侧边的快速定位。

查看演示

使用

1、准备jQuery库和scrollTo.js插件。

<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/jquery.scrollTo.js"></script> 

2、HTML

<ul class="nav"> 
   <li><a href="#" class="nav_pro">产品展示</a></li> 
   <li><a href="#" class="nav_news">新闻中心</a></li> 
   <li><a href="#" class="nav_ser">服务支持</a></li> 
   <li><a href="#" class="nav_con">联系我们</a></li> 
   <li><a href="#" class="nav_job">人才招聘</a></li> 
</ul> 
<div id="pro" class="box"> 
   <h3>产品展示</h3> 
</div> 
<div id="news" class="box"> 
   <h3>新闻中心</h3> 
</div> 
<div id="ser" class="box"> 
   <h3>服务支持</h3> 
</div> 
<div id="con" class="box"> 
   <h3>联系我们</h3> 
</div> 
<div id="job" class="box"> 
   <h3>人才招聘</h3> 
</div> 

我们用一个页面展示导航和导航对应的每个模块。

3、CSS

.nav{width:500px;margin:20px auto;} 
.nav li{float:left; width:100px; height:24px; line-height:24px} 
.box{height:500px} 
.box h3{height:32px; line-height:32px; padding-left:20px; font-size:14px} 
#pro,#ser{background:url(img/bg.jpg)} 
#news,#con{background:url(img/bg2.gif)} 

4、使用scrollTo.js插件

$(function(){ 
    $(".nav_pro").click(function(){ 
        $.scrollTo('#pro',500); 
    }); 
    $(".nav_news").click(function(){ 
        $.scrollTo('#news',800); 
    }); 
    $(".nav_ser").click(function(){ 
        $.scrollTo('#ser',1000); 
    }); 
    $(".nav_con").click(function(){ 
        $.scrollTo('#con',1200); 
    }); 
    $(".nav_job").click(function(){ 
        $.scrollTo('#job',1500); 
    }); 
}); 

当点击导航按钮时，触发scrollTo方法，$.scrollTo带有两个参数，第一个是指定要滚动的目的ID，第二个参数是滚动时间间隔，以毫秒为单位。在本例中，只应用了scrollTo的基本方法。

其实scrollTo还可以指定横向纵向滚动，传冲效果等，具体可以参照官方网站的例子：http://demos.flesler.com/jquery/scrollTo/

API

$(element).scrollTo(target[,duration][,settings]);

element

This must be a scrollable element, to scroll the whole window use $(window).

target

This defines the position to where element must be scrolled. The plugin supports all these formats:
* A number with a fixed position: 250
* A string with a fixed position with px: "250px"
* A string with a percentage (of container's size): "50%"
* A string with a relative step: "+=50px"
* An object with left and top containining any of the aforementioned: {left:250, top:"50px"}
* The string "max" to scroll to the end.
* A string selector that will be relative to the element to scroll: ".section:eq(2)"
* A DOM element, probably a child of the element to scroll: document.getElementById("top")
* A jQuery object with a DOM element: $("#top")

settings

The duration parameter is a shortcut to the setting with the same name.
These are the supported settings:
* axis: The axes to animate: xy (default), x, y, yx
* interrupt: If true will cancel the animation if the user scrolls. Default is false
* limit: If true the plugin will not scroll beyond the container's size. Default is true
* margin: If true, subtracts the margin and border of the target element. Default is false
* offset: Added to the final position, can be a number or an object with left and top
* over: Adds a % of the target dimensions: {left:0.5, top:0.5}
* queue: If true will scroll one axis and then the other. Default is false
* onAfter(target, settings): A callback triggered when the animation ends (jQuery's complete())
* onAfterFirst(target, settings): A callback triggered after the first axis scrolls when queueing

You can add any setting supported by $().animate() as well:

• duration: Duration of the animation, default is 0 which makes it instantaneous
• easing: Name of an easing equation, you must register the easing function: swing
• fail(): A callback triggered when the animation is stopped (f.e via interrupt)
• step(): A callback triggered for every animated property on every frame
• progress(): A callback triggered on every frame
• And more, check jQuery's documentation

window shorthand

You can use $.scrollTo(...) as a shorthand for $(window).scrollTo(...).

Changing the default settings

As with most plugins, the default settings are exposed so they can be changed.

$.extend($.scrollTo.defaults, {
  axis: 'y',
  duration: 800
});