当前位置：首页 > 设计 > 正文

JQuery版返回顶部

William2010-02-08 22:12设计19,059次浏览32条评论

扫一扫手机看

最近留言评论跟我要我博客上返回顶部的功能，最近也比较的忙，懒的一个一个的发了，想知道怎么用看看这篇文章就OK了，其实也没有什么东西，老手飘过！

让返回底部的图片一直居于浏览器的右下角，不应浏览器窗口大小的改变而改变。同时我又加了效果，浏览器滚动到一定的距离才会显示返回按钮。

方法很简单，请确保你页面包含了的Jquery框架。


<script type="text/javascript" src="https://libs.cdnjs.net/jquery/1.8.3/jquery.min.js"></script>

Jquery代码，放到合适位置


<script type="text/javascript">
jQuery(document).ready(function(){
	$(window).scroll(function() {
                var scroHei = $(window).scrollTop();//滚动的高度
                if (scroHei > 400) {
                    $('.gotop').fadeIn();
                } else {
                    $('.gotop').fadeOut();
                }
            });
	jQuery('.gotop').click(function(){
		jQuery('html,body').animate({
			scrollTop: '0px'
			}, 800);
		});
});
</script>

然后代码 <body> </body> 之间加入

然后在CSS代码中加入下面的CSS


.roll {bottom:120px;float:right;position:fixed;right:60px;width:32px;z-index: 9999;display: none;}
.roll_top {position:relative;cursor:pointer;height:32px;width:32px;border-radius:4px;background:url("up.png") no-repeat;}
.roll_top:hover {background:url("up.png") no-repeat -32px 0;}

up.png

你可自行替换。好了，修改完毕。

赏

【上一篇】继续折腾HP笔记本
【下一篇】新年快乐，换个新年主题『New Year』

JQuery版返回顶部：目前有 32 条评论

20楼
Jakes：

真是一篇好文章。

2011-09-25 13:17 回复
19楼
Lvtu：

小威，貌似每一个附件不能下载呢！

2011-04-26 15:05 回复
- William博主：
  
  @Lvtu没有，可以下的，我用是Google的外链，Google最近老被和谐的，杯具
  
  2011-04-27 00:47 回复
18楼
威武中国：

恩！好，谢谢。我去试试看！

2011-04-16 17:25 回复
17楼
威武中国：

你好。我想问一下第二种方案，Jquery代码要放在哪个文件夹下面呢？是footer文件夹吗？还有然后代码之间加入指的是不是也是footer文件夹呢？

2011-04-14 10:50 回复
- William博主：
  
  @威武中国正常情况下载放在主题的header.php里面。
  
  然后代码之间加入这个随便，你想加首页的页面就加首页，加内容页的页面就加内容页。
  
  2011-04-14 15:58 回复
16楼
创意酷：

正在找这个。不过

2011-03-10 11:35 回复
15楼
xiangxiang：

都弄完后，up.gif图片不显示，是怎么回事啊？

2011-02-28 13:44 回复
- William博主：
  
  @xiangxiang你用的是第一种还是第二种，我都试过，应该没有问题的，是不是你Jquery库没有加载
  
  2011-02-28 22:07 回复
  - xiangxiang：
    
    @William第一种的。能够找到图片的位置，鼠标点的到，就是图片没显示。
    Jquery库没有加载，就是把你给的那两个文件上传到common里咯，有的啊。
    
    2011-02-28 22:47 回复
    - William博主：
      
      @xiangxiang你上传图片到指定文件夹没有?
      要不你留下你的网址，我看看~
      
      2011-03-01 10:28 回复
      - xiangxiang：
        
        @William杯具，不知搞错什么，网页乱码了，哎，抽点时间搞太没精力了。
        等有时间再搞了，好了再来友情链接，谢谢你了。
        
        2011-03-01 18:12 回复
14楼
老宋：

呵呵还是没弄好不知道怎么弄才能弄你右边那样呵呵

2011-02-06 03:13 回复
- William博主：
  
  @老宋第二种方法就是
  
  2011-02-10 18:17 回复
13楼
hui460：

controlattrs:{ offsetx:28,offsety:88 } 这个右下角的位置，为什么分辨率变了后位置也变了，要怎么才能固定其位置。求解释

2010-12-20 10:33 回复
- William博主：
  
  @hui460这个跟图片大小有关。img src=”images/up.gif” style=”width:22px; height:28px”
  请确定你的图片大小，width:22px; height:28px 修改成你返回图片的大小。
  
  2010-12-20 18:37 回复
  - ASP：
    
    @William这个我改了的啊，，我感觉是controlattrs:{ offsetx:28,offsety:88 } 这代码里头的offsetx值是相对右下角坐标的，但是分标率改后，这个值不变，导致图片跟网页的DIV相对位置变了，，以至于看上去网页变了，图片位置变了想知道怎么改呢，，麻烦LZ说说解决办法
    
    2010-12-23 11:18 回复
    - William博主：
      
      @ASP应该不会的，这个跟浏览器分辨率没什么关系的，他只是距离浏览器右下的位置。你用的是什么浏览器？
      
      2010-12-23 21:14 回复
      - ASP：
        
        @William有QQ吗。。是距离右下角的位置没错呢，，只是我想把它位置紧靠我们页面中间的DIV，但是实现不了呢，，页面：http://www.1-luxury.com/brand/louis-vuitton-shop2.htm
        
        2010-12-23 21:38 回复
        
        William博主：
        
        @ASP我新加了个版本的返回顶部，你可以看下。下面这个就是你想要的效果了
        
        2010-12-26 01:26 回复
12楼
wmtimes：

图片的位置最好由css定位，如果单纯的由浏览器来定位是不美观，不同的分辨率显示的位置也不定。so …

William 于 2010-08-21 11:57 PM 回复

是靠CSS来定位图片的啊，style="width:22px; height:28px"，呵呵，定位就让他居于浏览器的右下角的。

2010-08-21 19:18 回复
11楼
Hyphon：

使用之后正常显示，但是评论框无法回复。管理员登录后按回复按钮没有反应。

William 于 2010-07-08 07:12 PM 回复

看你好像换了其他种类的返回顶部了。

2010-07-07 22:17 回复
10楼
JSchen：

我喜欢这个功能，牛Ｂ

2010-03-19 22:40 回复
9楼
凯说：

没有第三步会怎样？
第三步怎样放到其他程序里
我没有用第三步，出了问题，具体看我博客

William 于 2010-03-12 09:29 PM 回复

看你功能已经实现了，为什么像你那个样子，因为图片大小问题，我设定的是width:22px; height:28px，你要根据你的图片大小来调整下，应该就没有问题了。

2010-03-12 19:47 回复
8楼
阳光e友：

不错，支持共享

2010-02-17 22:54 回复
7楼
吉光片羽：

嘿嘿，貌似我的PJZONE用到的没有这么麻烦哦，不过省代码的后果是很卡……

William 于 2010-02-14 06:07 PM 回复

你上面用到的不止JQuery这一个库吧，其实是PJ3没怎么用到JQuery，装太多库还是应该加载速度的。

2010-02-14 03:40 回复
6楼
混乱羽翼：

嘿嘿…最近都流行使用jQuery特效了…
我的站点就是模仿别人…使用不少特效…
折腾,乃是人生的一大乐趣嘛

William 于 2010-02-11 11:43 PM 回复

哈哈，和我一样，看到好的东西就喜欢研究研究~

2010-02-11 22:45 回复
5楼
kaisay：

我是5月7日晚上通宵弄到我博客上的
你知道是什么原因
千变万化
嘿嘿

William 于 2010-02-10 06:32 PM 回复

去年5月7号？貌似那个时候我还没有用JQuery版的，开始用的是普通版的，现在博客上还在用，不过在IE下效果没有FireFox下效果好。

2010-02-10 16:55 回复
4楼
海天无影：

不错方便下~

2010-02-10 14:49 回复
地板
feln：

PJBLOG，我的博客初恋，可惜现在用不着了

William 于 2010-02-09 04:00 PM 回复

呵呵，旧的不去，新的不来嘛~

2010-02-09 05:42 回复
板凳
BestChao：

如果PJBLOG使用全静态的呢？

William 于 2010-02-09 00:12 AM 回复

文章已经添加了全静态的使用方法了。

2010-02-08 23:45 回复
沙发
78994983：

哇卡卡,有用啦,有用啦,狠感谢!

William 于 2010-02-08 11:03 PM 回复

能使用就好，不用客气~

2010-02-08 22:55 回复