下载掌阅APP，畅读海量书库
立即打开
1.13 平滑滚动页面到某个锚点
如果用户在使用浏览器时仔细观察的话，会发现Microsoft的IE浏览器打开时默认是平滑滚动页面的。网页滚动从开始到结束，中途有一个过渡时间，这样使得页面可以显示更多的内容细节。从用户体验上来讲，在网页上下滚动时开启平滑滚动，比禁用时效果更平滑舒服。本例效果如图1.20、图1.21和图1.22所示。
图1.20 “平滑滚动页面到某个锚点”的演示效果（一）
图1.21 “平滑滚动页面到某个锚点”的演示效果（二）
图1.22 “平滑滚动页面到某个锚点”的演示效果（三）
本例主要代码如下：
本例通过自定义函数scrollTo()实现平滑滚动页面到锚点的功能，第08~13行使用animate()函数实现HTM页面元素的“滑动”效果。
在animate()函数内，利用scrollTop()函数把内容滚动到指定的坐标，其语法如下：
其中参数offset为可选项，用来规定相对滚动条顶部的偏移，以像素为单位。
提示： 本例实现的“平滑滚动页面到某个锚点”效果实际上是通过.animate()函数与.offset()函数组合来实现的。如今，这种方法已经替代传统HTML操作DOM的scrollTo()函数了。