JQuery版返回顶部

William2010-02-08 22:12设计19,477次浏览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

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

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 回复