网页教程:页面返回顶部锚点按钮的设计

对于版面较长的网页，在底部会放上返回顶部的锚点链接，做法也很简单，直接用HTML就能实现，不过这种效果不交呆板，原因就是向上移动很突然，经常会让用户产生莫名的感觉，本文结合JS将实现一种滑动返回顶部的网页效果，这样用户感觉会比较舒服。

‘TOP’置顶链接，说的通俗一点就是‘返回顶部的链接’，‘go to top ’一般都放在页面的底部，它可以快速返回页面顶部，以节省用户浏览页面的时间。 它主要的应用场景是当你有一个很长的网页内容时，您通常要 把 ‘TOP’锚点链接 添加在页面底部，只要用户一点击‘TOP’链接 ,就可以马上回到 页面的顶部了。

我们遇到的问题是：不是滚动到页面底部的时候才看到了‘TOP’,如果页面内容超过两屏以上时，用户有些心烦，我不想看了，我想回到顶部看一些其他的内容。
如果我们只看了第一屏的文章，不想看了，可是‘TOP’在第二屏才会出现。

这时候有三种情况发生：

1. 发挥鼠标特长就是拖动浏览器的滚动条或是滚动鼠标滑轮，回到页面顶部。
2. 继续硬着头皮往下看，看有没有‘TOP’,幸运的话，马上找到了，可以回到顶部了。（一般人心中是没有‘TOP’概念的，只有选择1 和3 的方法了）
3. 直接关闭网页，或者重新打开网站，或者离开网站。

我想我们已经找到了问题的所在了。

我们有三种方案可以给用户带来良好的用户体验：

方案一：在合适的地方，手动加入一个或多个‘TOP’链接。

这是最原始的做法了，如果滚动太快，验，那就是我们给用户用脚本实现一下缓冲效果，而不是直接飙到顶部。

The HTML :

The JavaScript :

方案二：‘TOP’默认是隐藏的，只要滚动条，滚动到一定高度时就显示，否则就隐藏。

这样我可能想从中间某处回到页面的顶部成为可能。

The HTML :

The CSS :

The MooTools JavaScript :

注意：

我们需要MooTools Core 库的同时，也需要MooTools More 库中的 Fx.Scroll.js 和 Fx.SmoothScroll.js 两大文件。

还有一个例子是动态生成‘TOP’。

The MooTools JavaScript :

The jQuery JavaScript :

需要jQuery’s ScrollTo plugin 插件添加一些平滑的锚。

注意：

Please note that this version doesn’t work with Internet Explorer due to IE’s lack of CSS “position:fixed” support. Here is a shotty attempt at IE support: