两种页面平滑跳转滚动的解决方案

在网页设计中，当页面较长或是想实现一个导航效果时，我们经常会用锚点来实现同一页面间不同位置的跳转。但是这样做也许会造成用户的一种困惑——当用锚点跳转时，页面内容瞬间发生了改变，用户也许就会想：我还在原来的那个页面上吗？如果我们能把这种情况做成平滑滚动的效果（而非瞬间跳转到页面的另一个位置），就可以获得一个好的用户体验。

对于这种情况的解决方案可能已经有不少，这里我找到两个感觉比较好的与大家分享：

解决方案一：

这个方法使用起来非常简单（当然功能单一，也没有乱七八糟的参数可配置）：将smoothscroll.js文件在head标签中引用，页面中所有锚点跳转的效果都变成了平滑滚动。在这里可以看到示例。

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

 

解决方案二：

ScrollTo是一款用来实现页面间不同位置平滑滚动的jquery插件。相比解决方案一，它的功能就强大多了，有不少参数可以配置，跳转的位置也不仅限于锚点（可以是DOM对象，绝对坐标位置、相对位置等等），而且跳转的范围不仅可以设置为整个屏幕，而且可以指定为某个节点内。 例如（以下例子均假设跳转链接id=’link’）：

滚动至屏幕的最顶端（重置屏幕位置）

$('#top').click(function(){
/*第一个参数0表示滑动至屏幕原点，第二个参数表示滑动速度*/
           $.scrollTo(0 , 800 ); 
 });滚动至页面某一坐标（绝对位置）

$('#link').click(function(){
/*第一个参数表示滑动至屏幕距上110px、距左290px处，第二个参数表示滑动速度*/
           $.scrollTo(0{top:'110px',left:'290px'}, 800 ); 
 });滚动至页面某一坐标（相对位置）

$('#link').click(function(){
/*第一个参数表示相对当前上移110px、右移290px，第二个参数表示滑动速度*/
           $.scrollTo(0{top:'-=110px',left:'+=290px'}, 800 ); 
 });