简单生活

Simple life , it's as easy as 1,2,3...

返回页面顶部的JS特效

一个很贴心的小功能,返回页面顶部,很多网站都有。一个文字或者图片链接,点击这个链接后就会自动跳到该页面的顶部。

常用的方法是在body标签添加一个标记。

复制内容到剪贴板
  1. <body>  
  2. <a name="top">  

然后在需要的地方添加链接即可。

复制内容到剪贴板
  1. <a href="#top">返回</a>  

还有更简单的,我一般都是这么干的,一个空标记就可以返回顶部,不知道为什么,反正这样行的通

复制内容到剪贴板
  1. <a href="#">返回顶部</a>  

有朋友留言说需要这段代码,找出来贴一下

折叠-JavaScript代码复制内容到剪贴板
  1. //<![CDATA[  
  2. var goto_top_type = -1;  
  3. var goto_top_itv = 0;  
  4.   
  5. function goto_top_timer()  
  6. {  
  7. var y = goto_top_type == 1 ? document.documentElement.scrollTop : document.body.scrollTop;  
  8. var moveby = 15;  
  9.   
  10. y -= Math.ceil(y * moveby / 100);  
  11. if (y < 0) {  
  12. y = 0;  
  13. }  
  14.   
  15. if (goto_top_type == 1) {  
  16. document.documentElement.scrollTop = y;  
  17. }  
  18. else {  
  19. document.body.scrollTop = y;  
  20. }  
  21.   
  22. if (y == 0) {  
  23. clearInterval(goto_top_itv);  
  24. goto_top_itv = 0;  
  25. }  
  26. }  
  27.   
  28. function goto_top()  
  29. {  
  30. if (goto_top_itv == 0) {  
  31. if (document.documentElement && document.documentElement.scrollTop) {  
  32. goto_top_type = 1;  
  33. }  
  34. else if (document.body && document.body.scrollTop) {  
  35. goto_top_type = 2;  
  36. }  
  37. else {  
  38. goto_top_type = 0;  
  39. }  
  40.   
  41. if (goto_top_type > 0) {  
  42. goto_top_itv = setInterval('goto_top_timer()', 50);  
  43. }  
  44. }  
  45. }  
  46. //]]>  

然后再在适当的地方添加如下的链接:

复制内容到剪贴板
  1. <a href="javascript:void(0)" onclick="goto_top()">返回页顶</a>  

 

« 曹植《洛神赋》Twitter第三方网页客户端 »
    Gravatar头像
  • quote 1.zspadmin
  • 2009-10-20 23:18:42 回复
  • 呵呵,兄弟太感谢你了,可能在你发布这篇支持时,我已经拿网络上搜来的代码实验成功了,不过还是要感谢你。
    再次顶你一下,你文章里面的特效实在是不错呵呵,把你网站永久收藏了,以后多跟你学习哈,O(∩_∩)O~

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

关注我

最新评论及回复

赞助商链接

Powered By Z-Blog 1.8 Walle Build 91204
Copyright © 2007-2011 Wilf.cn. Some Rights Reserved