快速业务通道

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

作者 佚名技术 来源 网页制作 浏览 发布时间 2012-03-06

对于版面较长的网页,在底部会放上返回顶部的锚点链接,做法也很简单,直接用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:

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务,公司网站:http://www.lingzhong.cn 为了给广大客户了解更多的技术信息,本技术文章收集来源于网络,凌众科技尊重文章作者的版权,如果有涉及你的版权有必要删除你的文章,请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息,谢谢!

分享到: 更多

Copyright ©1999-2011 厦门凌众科技有限公司 厦门优通互联科技开发有限公司 All rights reserved

地址(ADD):厦门软件园二期望海路63号701E(东南融通旁) 邮编(ZIP):361008

电话:0592-5908028 传真:0592-5908039 咨询信箱:web@lingzhong.cn 咨询OICQ:173723134

《中华人民共和国增值电信业务经营许可证》闽B2-20100024  ICP备案:闽ICP备05037997号