2009-4
10
在网页设计中，当页面较长或是想实现一个导航效果时，我们经常会用锚点来实现同一页面间不同位置的跳转。但是这样做也许会造成用户的一种困惑——当用锚点跳转时，页面内容瞬间发生了改变，用户也许就会想：我还在原来的那个页面上吗？如果我们能把这种情况做成平滑滚动的效果（而非瞬间跳转到页面的另一个位置），就可以获得一个好的用户体验。
对于这种情况的解决方案可能已经有不少，这里我找到两个感觉比较好的与大家分享：
解决方案一：
这个方法使用起来非常简单（当然功能单一，也没有乱七八糟的参数可配置）：将smoothscroll.js文件在head标签中引用，页面中所有锚点跳转的效果都变成了平滑滚动。在这里可以看到示例。
下载：smoothscroll.js [下载次数：493]
HTML
<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 ); });
延伸阅读:
- Jquery Tools——不可错过的Jquery UI库（三）
- 使用jQuery及Bing API实现简易搜索引擎
- Tinybox模态框使用扩展一则
- 强大的Jquery图表绘制插件 —— jqPlot
- FullSize：一个新的IMG标签属性（附带JQuery实现）
- jQuery Tools——不可错过的jQuery UI库（五）
- 通过JQuery实现所有外部链接从新窗口打开
- Jquery Tools——不可错过的Jquery UI库（四）
版权声明：
本站内容受著作权法保护。个人网站、blog转载时请遵循 “署名-非商业用途-保持一致” 的创作共用协议；商业网站或媒体未授权不得复制本站内容。
友情提示：
如对本文有任何疑问，或在示例的使用中遇到问题，或有好的建议，欢迎在下面留言共同学习，有问必答。
用了方案2
^-^去你博客看了，效果不错。
难道这么写就不平滑吗？
$(”#ad”).animate({marginLeft:”-250px”}
这样写当然也是可以的。 封装成插件是为了用标准的借口解决一类问题。
不错！谢谢。
··博主 文章的 发布页面链接 是空~ 我在电脑上做了效果出不来···
$(’top’).scrollTo( ‘li:eq(15)’, 1000, {offset:-50} );//add or deduct from the final position
……
TOP
PS:代码中的jquery链接地址为本地的。
博主 可不可以发一个应用了解决方案2的HTML页面代码， EMAIL 也可以· 谢了~
这个插件的发布页面被墙了，确实访问不了。
我写了个简单示例，发到你邮箱了。
收到了， 感谢 博主。 那么忙 还 发了例子到我邮箱，谢谢！！
偶也需要一个应用了解决方案2的HTML页面代码，email· 谢谢了哈！
邮件已发，有问题再联系。
收到，收到。谢谢博主了哈！
I totally love this article. I think you could write some other things to make your blog more complete.For example： ed hardy.vibram five fingers.p90x workout schedule. mbt shoes. hardy caps. vibram fivefingers kso trek. mbt chapa dawn shoes.
ghd straightener
ugg ugg boots
replica louis vuitton handbags
edhardyI thought that many people can like.
i believe you are a good writer, but have you erver thought to write some special artcals for peopel who likes shopping very much. for exaple, the artical aboutlouis vuitton handbags orvibram fivefingers,ghd orchristian louboutin,ugg bootsand
swiss watches as well asmichael jordan shoeschi hair straightener,nfl football apparel,
t shirts. i think more and more people would comr to read your blogs.