Discuz教程网

1314学习网»站长论坛 › 站长交流区 › 技术杂谈 › 基于jquery的返回顶部效果
返回列表 发新帖

基于jquery的返回顶部效果

[复制链接]
authicon 09927306 发表于 2011-1-18 14:31:16 | 显示全部楼层 |阅读模式
最近在写一个首页返回顶部的效果，因为IE6不兼容position:fixed的原因，一直找不到好的解决办法。在Google了一下，有了点眉目，加上一点自己的开发，总算误打误撞的把问题解决了。
最近也在学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:ellipsis;} /*解决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. }
复制代码

最后不要忘记了jQuery.js文件





上一篇：Jquery知识点三 jquery表单对象操作
下一篇：jquery+ajax每秒向后台发送请求数据然后返回页面的代码
回复

举报

authicon 飞闪 发表于 2011-1-19 09:10:51 | 显示全部楼层
礼貌看帖，文明回帖
回复

举报

authicon  楼主| 09927306 发表于 2011-1-19 19:13:20 | 显示全部楼层
你一下回了好多贴。。。
回复

举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

1314学习网 ( 浙ICP备10214163号 )

GMT+8, 2025-5-3 09:29

Powered by Discuz! X3.4

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表