在网页设计中,当页面较长或是想实现一个导航效果时,我们经常会用锚点来实现同一页面间不同位置的跳转。但是这样做也许会造成用户的一种困惑——当用锚点跳转时,页面内容瞬间发生了改变,用户也许就会想:我还在原来的那个页面上吗?如果我们能把这种情况做成平滑滚动的效果(而非瞬间跳转到页面的另一个位置),就可以获得一个好的用户体验。
对于这种情况的解决方案可能已经有不少,这里我找到两个感觉比较好的与大家分享:
解决方案一:
这个方法使用起来非常简单(当然功能单一,也没有乱七八糟的参数可配置):将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 );
});