技术文章 订阅所有【技术文章】的日志

Javascript返回页面顶部的滚动特效

作者:admin 日期:2012-04-29

字体大小: 小 中 大

和前面的一篇文章作用一样，这个代码写得不错！

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

有时间研究下这个网站的效果：http://webdesignerwall.com/



上一篇: Javascript实现网页平滑滚动回到顶部
下一篇: Javascript滚动条事件onscroll测试
文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags: javascript
相关日志:
评论: 0 | 引用: 0 | 查看次数: 2427
发表评论
昵　称:
密　码: 游客发言不需要密码.
邮　箱: 邮件地址支持Gravatar头像,邮箱地址不会公开.
网　址: 输入网址便于回访.
内　容:
验证码:
选　项:
虽然发表评论不用注册，但是为了保护您的发言权，建议您注册帐号.
字数限制 1000 字 | UBB代码 开启 | [img]标签 关闭

 广告位

↑返回顶部↑