总共写了两种方案，喜欢哪种用哪种！

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

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

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

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

第一步，下载：

jquery 返回顶部的两端代码 _休闲
解压下载的文件，将里面的js文件上传到博客根目录下大的common文件夹里面。

第二步：

打开header.asp，在合适位置（自己看看就晓得了）加上

 

  1. <Script type="text/javascript" src="common/jquery.js"></script> 
  2.  
  3. <Script type="text/javascript" src="common/backtop.js"></script> 

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

第三步：

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

 

  1.     //初始化JS代码 
  2.  
  3. function initJS(){ 
  4.  
  5.     ReImgSize() //自动缩放代码 
  6.  
  7.     initAccessKey()  //转换AccessKey For IE 
  8.  
  9. } 

改为

 

  1. //初始化JS代码 
  2.  
  3. function initJS(){ 
  4.  
  5.     ReImgSize() //自动缩放代码 
  6.  
  7.     initAccessKey()  //转换AccessKey For IE 
  8.  
  9.     scrolltotop.init() 
  10.  
  11. } 

第四步：

做一个图片，取名up.gif，上传到博客根目录下的p_w_picpaths文件夹下面。提示：
若想修改图片的大小及在浏览器中的位置，打开，下载的文件backtop.js，找到

 
  1. <img src="p_w_picpaths/up.gif" style="width:12px; height:95px" />',controlattrs:{ 
  2.  
  3.        offsetx:28,offsety:88 
  4.  
  5.    } 

up.gif
jquery 返回顶部的两端代码 _休闲_02
图片的宽带，高度根据你做的图片修改下，还就是与右下角的距离，请自行调整到自己满意的位置。
好了，修改结束，刷新下首页，就看见返回顶部了。

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

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

 

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

Jquery代码，放到合适位置

  1. <script type="text/javascript"> 
  2.  
  3. jQuery(document).ready(function($){ 
  4.  
  5. $('#roll_top').click(function(){$('html,body').animate({scrollTop: '0px'}, 800);}); 
  6.  
  7. $('#roll_bottom').click(function(){$('html,body').animate({scrollTop:$('#foot').offset().top}, 800);}); 
  8.  
  9. }); 
  10.  
  11. </script> 
  12.  
  13. // 其中#foot的foot是博客底部某个id的名称，请根据实际替换，其他的就不用调整了。 

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

 

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

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

查看源代码
打印帮助
  1.     html body { 
  2.  
  3. _background-p_w_picpath:url(about:blank); 
  4.  
  5. _background-p_w_upload:fixed; 
  6.  
  7. } 
  8.  
  9. #roll_top,#roll_bottom { 
  10.  
  11.     position:relative; 
  12.  
  13.     cursor:pointer; 
  14.  
  15.     height:40px; 
  16.  
  17.     width:15px; 
  18.  
  19.     } 
  20.  
  21. #roll_top { 
  22.  
  23.     background:url(up.png) no-repeat; 
  24.  
  25.     } 
  26.  
  27. #roll_bottom { 
  28.  
  29.     background:url(up.png) no-repeat 0 -40px; 
  30.  
  31.     } 
  32.  
  33. #roll { 
  34.  
  35.     display:block; 
  36.  
  37.     width:15px; 
  38.  
  39.     margin-right:-486px;  /*这个是距离的位置，请自行调整*/ 
  40.  
  41.     position:fixed; 
  42.  
  43.     right:50%; 
  44.  
  45.     top:50%; 
  46.  
  47.     _margin-right:-485px;/*Hack IE6的，请用IE6打开自行调整*/ 
  48.  
  49.     _position:absolute; 
  50.  
  51.     _margin-top:300px; 
  52.  
  53.     _top:expression(eval（document.documentElement.scrollTop)); 
  54.  
  55.     } up.png

jquery 返回顶部的两端代码 _休闲_03

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