PJBlog添加JQuery版返回顶部的功能

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

1、下载 http://www.dynamicdrive.com/dynamicindex3/scrolltopcontrol.js

将“scrolltopcontrol.js”文件上传到blog的common文件夹里面。

2、打开header.asp,在其加上下面的代码(加哪里都行)

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

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

3、制作一个up.png,上传到blog的根目录下面

若想修改图片的大小或者路径等,就需要打开scrolltopcontrol.js,找到下面的一段代码,进行修改

setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},
controlHTML: '<img src="up.gif" style="width:24px; height:24px" />', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol"
controlattrs: {offsetx:15, offsety:15}, //offset of control relative to right/ bottom of window corner
anchorkeyword: '#top', //Enter href value of HTML anchors on the page that should also act as "Scroll Up" links

根据自己的需要,修改其中的图片大小,图片位置等。

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

相关文章:
http://www.dynamicdrive.com/dynamicindex3/scrolltop.htm
http://www.ihiro.org/jquery-scrolltop-plugins
http://www.weisay.com/blog/article.asp?id=319

This entry was posted in Technology and tagged , , . Bookmark the permalink. 13,525 views

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *