夏日博客

A-A+

jquery返回顶部实现方法

2016年01月07日 前端设计 暂无评论 阅读 5 views 次

本文章主要讲关于jquery返回顶部实现方法，下面看代码吧。

html 代码如下:

  1. <div class="scroll"></div>   
  2. <script type="text/javascript" src="../skins/css/jquery.js" charset="utf-8"></script>   
  3. <script type="text/javascript" src="../skins/css/top.js" charset="utf-8"></script>  

css 代码如下:

  1. .scroll{   
  2. background:url(../image/scroll.gif) no-repeat center top transparent;   
  3. bottom:100px;   
  4. cursor:pointer;   
  5. height:67px;   
  6. width:18px;   
  7. position:fixed;   
  8. _position:absolute; /*兼容ie6*/   
  9. _top: expression(eval(document.documentelement.scrolltop)+700); /*700为图片距离顶部的设定距离，可以修改。不加700则图片紧贴在顶部滚动*/   
  10. }   
  11. html{_text-overflow:ellips教程is;} /*解决ie6下图片抖动*/  

top.js 代码如下:

  1. $(document).ready(function(){   
  2. var show_delay;   
  3. var scroll_left=parseint((document.body.offsetwidth-960)/2)+961; //960为页面宽度   
  4. $(".scroll").click(function (){   
  5. document.documentelement.scrolltop=0;   
  6. document.body.scrolltop=0;   
  7. });   
  8. $(window).resize(function (){   
  9. scroll_left=parseint((document.body.offsetwidth-960)/2)+961;   
  10. $(".scroll").css("left",scroll_left);   
  11. });   
  12. reshow(scroll_left,show_delay);   
  13. });   
  14. function reshow(marign_l,show_d) {   
  15. $(".scroll").css("left",marign_l);   
  16. if((document.documentelement.scrolltop+document.body.scrolltop)!=0)   
  17. {   
  18. $(".scroll").css("display","block");   
  19. }   
  20. else   
  21. {   
  22. $(".scroll").css("display","none");}   
  23. if(show_d) window.cleartimeout(show_d);   
  24. show_d=settimeout("reshow()",500);   
  25. }  
标签：

给我留言