您的位置：首页 > Web前端 > JQuery

jquery 返回顶部的两端代码

2012-03-19 10:27 267 查看

总共写了两种方案，喜欢哪种用哪种！
第一种方案，这种方案是让放回底部的图片一直居于浏览器的右下角，不应主题的改变而改变。
这个是用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

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航