威言威语

我愿像茶一样,把苦涩留在心里,敬发出来的都是清香!
威言威语
当前位置: 首页 > 设计 > 正文

JQuery版返回顶部

JQuery是时下比较热门的Javascript库,通过JQuery可以实现很多很炫的效果,JQuery返回顶部只是一个基本的应用,同时也是一个很实用的功能。

最近留言评论跟我要我博客上返回顶部的功能,最近也比较的忙,懒的一个一个的发了,想知道怎么用看看这篇文章就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

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

本文固定链接: https://www.weisay.com/blog/jquery-return-top.html | 威言威语

您可能还会对这些文章感兴趣!

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

  1. avatar
    20楼
    Jakes枫树极速浏览器 1.6.2.0 Windows XP

    :cool: 真是一篇好文章。

    2011-09-25 13:17 回复
  2. avatar
    19楼
    LvtuGoogle Chrome 12.0.725.0 Windows 7

    小威,貌似每一个附件不能下载呢!

    2011-04-26 15:05 回复
    • avatar
      WilliamInternet Explorer 9.0 Windows 7

      没有,可以下的,我用是Google的外链,Google最近老被和谐的,杯具

      2011-04-27 00:47 回复
  3. avatar
    18楼

    恩!好,谢谢。我去试试看!

    2011-04-16 17:25 回复
  4. avatar
    17楼

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

    2011-04-14 10:50 回复
    • avatar
      William傲游浏览器 2.0 Windows XP

      正常情况下载放在主题的header.php里面。

      然后代码 之间加入 这个随便,你想加首页的页面就加首页,加内容页的页面就加内容页。

      2011-04-14 15:58 回复
  5. avatar
    16楼

    正在找这个。不过

    2011-03-10 11:35 回复
  6. avatar
    15楼
    xiangxiang:Internet Explorer 8.0 Windows XP

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

    2011-02-28 13:44 回复
    • avatar
      WilliamFirefox 3.6.13 Windows 7

      你用的是第一种还是第二种,我都试过,应该没有问题的,是不是你Jquery库没有加载

      2011-02-28 22:07 回复
      • avatar
        xiangxiang:Internet Explorer 8.0 Windows XP

        第一种的。能够找到图片的位置,鼠标点的到,就是图片没显示。
        Jquery库没有加载,就是把你给的那两个文件上传到common里咯,有的啊。

        2011-02-28 22:47 回复
        • avatar
          William傲游浏览器 2.0 Windows XP

          你上传图片到指定文件夹没有?
          要不你留下你的网址,我看看~

          2011-03-01 10:28 回复
          • avatar
            xiangxiang:Internet Explorer 8.0 Windows XP

            杯具,不知搞错什么,网页乱码了,哎,抽点时间搞太没精力了。
            等有时间再搞了,好了再来友情链接,谢谢你了。

            2011-03-01 18:12 回复
  7. avatar
    14楼
    老宋Internet Explorer 8.0 Windows XP

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

    2011-02-06 03:13 回复
    • avatar
      WilliamFirefox 3.6.13 Windows XP

      第二种方法就是

      2011-02-10 18:17 回复
  8. avatar
    13楼
    ASP.NET:Internet Explorer 7.0 Windows XP

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

    2010-12-20 10:33 回复
    • avatar
      William世界之窗浏览器 Windows XP

      这个跟图片大小有关。img src=”images/up.gif” style=”width:22px; height:28px”
      请确定你的图片大小,width:22px; height:28px 修改成你返回图片的大小。

      2010-12-20 18:37 回复
      • avatar
        ASP.NET:Internet Explorer 7.0 Windows XP

        这个我改了的啊,,我感觉是controlattrs:{ offsetx:28,offsety:88 } 这代码里头的offsetx值是相对右下角坐标的,但是分标率改后,这个值不变,导致图片跟网页的DIV相对位置变了,,以至于看上去网页变了,图片位置变了 想知道怎么改呢,,麻烦LZ说说解决办法

        2010-12-23 11:18 回复
        • avatar
          WilliamFirefox 3.6.13 Windows 7

          应该不会的,这个跟浏览器分辨率没什么关系的,他只是距离浏览器右下的位置。你用的是什么浏览器?

          2010-12-23 21:14 回复
          • avatar
            ASP.NET:Internet Explorer 6.0 Windows XP

            有QQ吗。。是距离右下角的位置没错呢,,只是我想把它位置紧靠我们页面中间的DIV,但是实现不了呢,, 页面:http://www.1-luxury.com/brand/louis-vuitton-shop2.htm

            2010-12-23 21:38 回复
            • avatar
              WilliamFirefox 3.6.13 Windows 7

              我新加了个版本的返回顶部,你可以看下。下面这个就是你想要的效果了

              2010-12-26 01:26 回复
  9. avatar
    12楼

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

    William 于 2010-08-21 11:57 PM 回复
    是靠CSS来定位图片的啊,style="width:22px; height:28px",呵呵,定位就让他居于浏览器的右下角的。

    2010-08-21 19:18 回复
  10. avatar
    11楼
    HyphonFirefox 22.0 Windows 7 x64 Edition

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

    William 于 2010-07-08 07:12 PM 回复
    看你好像换了其他种类的返回顶部了。

    2010-07-07 22:17 回复
  11. avatar
    10楼
    JSchen:Google Chrome 19.0.1084.52 Windows 7 x64 Edition

    我喜欢这个功能,牛B

    2010-03-19 22:40 回复
  12. avatar
    9楼
    凯说Google Chrome 13.0.782.215 Windows 7

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

    William 于 2010-03-12 09:29 PM 回复
    看你功能已经实现了,为什么像你那个样子,因为图片大小问题,我设定的是width:22px; height:28px,你要根据你的图片大小来调整下,应该就没有问题了。

    2010-03-12 19:47 回复
  13. avatar
    8楼

    不错,支持共享

    2010-02-17 22:54 回复
  14. avatar
    7楼

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

    William 于 2010-02-14 06:07 PM 回复
    你上面用到的不止JQuery这一个库吧,其实是PJ3没怎么用到JQuery,装太多库还是应该加载速度的。

    2010-02-14 03:40 回复
  15. avatar
    6楼

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

    William 于 2010-02-11 11:43 PM 回复
    哈哈,和我一样,看到好的东西就喜欢研究研究~

    2010-02-11 22:45 回复
  16. avatar
    5楼

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

    William 于 2010-02-10 06:32 PM 回复
    去年5月7号?貌似那个时候我还没有用JQuery版的,开始用的是普通版的,现在博客上还在用,不过在IE下效果没有FireFox下效果好。

    2010-02-10 16:55 回复
  17. avatar
    4楼

    不错 方便下~

    2010-02-10 14:49 回复
  18. avatar
    地板
    feln:Google Chrome 13.0.782.1 Windows 7 x64 Edition

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

    William 于 2010-02-09 04:00 PM 回复
    呵呵,旧的不去,新的不来嘛~

    2010-02-09 05:42 回复
  19. avatar
    板凳
    BestChao:Internet Explorer 8.0 Windows XP

    如果PJBLOG使用全静态的呢?

    William 于 2010-02-09 00:12 AM 回复
    文章已经添加了全静态的使用方法了。

    2010-02-08 23:45 回复
  20. avatar
    沙发
    78994983:QQ浏览器 5.0.6657.400 Windows XP

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

    William 于 2010-02-08 11:03 PM 回复
    能使用就好,不用客气~

    2010-02-08 22:55 回复

发表评论

avatar

电子邮件地址不会被公开。 必填项已用 * 标注

question razz sad smile redface biggrin surprised eek confused cool lol mad rolleyes wink neutral cry

快捷键:Ctrl+Enter