当前位置: 首页 > 设计 > 正文
avatar

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

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

总共写了两种方案,喜欢哪种用哪种!

第一种方案,这种方案是让放回底部的图片一直居于浏览器的右下角,不应主题的改变而改变。

这个是用PJBlog的时候写的,所以以PJBlog做的例子,当然肯定不局限于PJBlog。

这个返回顶部是用JQuery实现的,PJBlog3没有使用什么JQuery库。

下面的修改支持PJBlog的全动态,半静态,全静态。

第一步,下载:

解压下载的文件,将里面的js文件上传到博客根目录下大的common文件夹里面。

第二步:

打开header.asp,在合适位置(自己看看就晓得了)加上

<Script type="text/javascript" src="common/jquery.js"></script>

<script type="text/javascript" src="common/backtop.js"></script>

如果你用的是全静态,请在Template文件夹的static.htm文件中的合适位置加上上面的代码,并重新生成缓存,不是全静态的这步可以不做。

第三步:

打开common文件夹下的common.js文件,找到

//初始化JS代码

function initJS(){

	ReImgSize() //自动缩放代码

	initAccessKey()  //转换AccessKey For IE

}

改为

//初始化JS代码

function initJS(){

	ReImgSize() //自动缩放代码

	initAccessKey()  //转换AccessKey For IE

	scrolltotop.init()

}

第四步:

做一个图片,取名up.gif,上传到博客根目录下的images文件夹下面。提示:

若想修改图片的大小及在浏览器中的位置,打开,下载的文件backtop.js,找到

<img src="images/up.gif" style="width:12px; height:95px" />',controlattrs:{

		offsetx:28,offsety:88

	}

up.gif

图片的宽带,高度根据你做的图片修改下,还就是与右下角的距离,请自行调整到自己满意的位置。

好了,修改结束,刷新下首页,就看见返回顶部了。

第二种方案,返回图片相对于主题边缘静止,可以返回顶部,返回底部。当然也可以返回到中间内容的某个特定值上。

方法很简单,请确保你页面包含了的Jquery框架。当然你也可以像我一样使用


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

Jquery代码,放到合适位置

	<script type="text/javascript">

	jQuery(document).ready(function($){

	$('#roll_top').click(function(){$('html,body').animate({scrollTop: '0px'}, 800);});

	$('#roll_bottom').click(function(){$('html,body').animate({scrollTop:$('#foot').offset().top}, 800);});

	});

	</script>

	// 其中#foot的foot是博客底部某个id的名称,请根据实际替换,其他的就不用调整了。

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

<div id="roll"><div title="回到顶部" id="roll_top"></div><div title="转到底部" id="roll_bottom"></div></div>

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


html body {

_background-image:url(about:blank);

_background-attachment:fixed;

}

#roll_top,#roll_bottom {

	position:relative;

	cursor:pointer;

	height:40px;

	width:15px;

	}

#roll_top {

	background:url(up.png) no-repeat;

	}

#roll_bottom {

	background:url(up.png) no-repeat 0 -40px;

	}

#roll {

	display:block;

	width:15px;

	margin-right:-486px;  /*这个是距离的位置,请自行调整*/

	position:fixed;

	right:50%;

	top:50%;

	_margin-right:-485px;/*Hack IE6的,请用IE6打开自行调整*/

	_position:absolute;

	_margin-top:300px;

	_top:expression(eval(document.documentElement.scrollTop));

	}

up.png

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

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

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

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

    :cool: 真是一篇好文章。

    2011-09-25 13:17 [回复]
  2. avatar
    19楼
    Lvtu Google Chrome Windows

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

    2011-04-26 15:05 [回复]
    • avatar
      William Internet Explorer Windows

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

      2011-04-27 00:47 [回复]
  3. avatar
    18楼
    威武中国 Mozilla Firefox Windows

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

    2011-04-16 17:25 [回复]
  4. avatar
    17楼
    威武中国 Mozilla Firefox Windows

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

    2011-04-14 10:50 [回复]
    • avatar
      William Maxthon Windows

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

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

      2011-04-14 15:58 [回复]
  5. avatar
    16楼
    创意酷 Maxthon Windows

    正在找这个。不过

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

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

    2011-02-28 13:44 [回复]
    • avatar
      William Mozilla Firefox Windows

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

      2011-02-28 22:07 [回复]
      • avatar
        xiangxiang Internet Explorer Windows

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

        2011-02-28 22:47 [回复]
        • avatar
          William Maxthon Windows

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

          2011-03-01 10:28 [回复]
          • avatar
            xiangxiang Internet Explorer Windows

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

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

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

    2011-02-06 03:13 [回复]
    • avatar
      William Mozilla Firefox Windows

      第二种方法就是

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

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

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

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

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

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

        2010-12-23 11:18 [回复]
        • avatar
          William Mozilla Firefox Windows

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

          2010-12-23 21:14 [回复]
          • avatar
            ASP.NET 搜狗浏览器 Windows

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

            2010-12-23 21:38 [回复]
            • avatar
              William Mozilla Firefox Windows

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

              2010-12-26 01:26 [回复]
  9. avatar
    12楼
    wmtimes Unknow Browser Unknow Os

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

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

    2010-08-21 19:18 [回复]
  10. avatar
    11楼
    Hyphon Unknow Browser Unknow Os

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

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

    2010-07-07 22:17 [回复]
  11. avatar
    10楼
    JSchen Unknow Browser Unknow Os

    我喜欢这个功能,牛B

    2010-03-19 22:40 [回复]
  12. avatar
    9楼
    凯说 Unknow Browser Unknow Os

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

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

    2010-03-12 19:47 [回复]
  13. avatar
    8楼
    阳光e友 Unknow Browser Unknow Os

    不错,支持共享

    2010-02-17 22:54 [回复]
  14. avatar
    7楼
    吉光片羽 Unknow Browser Unknow Os

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

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

    2010-02-14 03:40 [回复]
  15. avatar
    6楼
    混乱羽翼 Unknow Browser Unknow Os

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

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

    2010-02-11 22:45 [回复]
  16. avatar
    5楼
    kaisay.cn Unknow Browser Unknow Os

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

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

    2010-02-10 16:55 [回复]
  17. avatar
    4楼
    海天无影 Unknow Browser Unknow Os

    不错 方便下~

    2010-02-10 14:49 [回复]
  18. avatar
    地板
    feln Unknow Browser Unknow Os

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

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

    2010-02-09 05:42 [回复]
  19. avatar
    板凳
    BestChao Unknow Browser Unknow Os

    如果PJBLOG使用全静态的呢?

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

    2010-02-08 23:45 [回复]
  20. avatar
    沙发
    78994983 Unknow Browser Unknow Os

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

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

    2010-02-08 22:55 [回复]

发表评论

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

快捷键:Ctrl+Enter