使用jQuery滑动代码实现返回顶部
jQuery是个好东西，可以实现多种很炫的效果，今天这里说的就是利用jQuery滑动代码在wordpress实现返回顶部的效果，不过稍微修改一下就能在任何网站，blog平台实现。
这种方法有两种实现效果：
第一种，请看本站最下面的“返回顶部”，点击一下就能看到效果。
第二种，请点击“Our Record”，在网页右下角有一个浮动的图片，跟随网页滚轴移动，点击即可。
第一种实现方法很简单，我们只需要一个jQuery的代码，再在合适的位置插入即可。
1.你可以直接下载gototop.js，点击下载gototop.js，当然，你也可以复制下列代码，用Dreamweaver或者Notepad++等工具保存。然后把gototop.js上传到当前使用目录的文件夹或者js文件夹里
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 | //<![CDATA[
var goto_top_type = -1;
var goto_top_itv = 0;
function goto_top_timer()
{
var y = goto_top_type == 1 ? document.documentElement.scrollTop :
document.body.scrollTop;
var moveby = 15;
y -= Math.ceil(y * moveby / 100);
if (y < 0) {
y = 0;
}
if (goto_top_type == 1) {
document.documentElement.scrollTop = y;
}
else {
document.body.scrollTop = y;
}
if (y == 0) {
clearInterval(goto_top_itv);
goto_top_itv = 0;
}
}
function goto_top()
{
if (goto_top_itv == 0) {
if (document.documentElement && document.documentElement.scrollTop) {
goto_top_type = 1;
}
else if (document.body && document.body.scrollTop) {
goto_top_type = 2;
}
else {
goto_top_type = 0;
}
if (goto_top_type > 0) {
goto_top_itv = setInterval('goto_top_timer()', 50);
}
}
}
//]]> |
2.将下列代码放到header.php的< head> < /head>中
1 2 | <script src="<?php bloginfo('stylesheet_directory'); ?>/gototop.js" type="text/javascript" charset="utf-8"></script> |
说明一下，上面这段代码中默认的gototop.js的位置是在主题文件夹的目录里，如果你是保存在js文件夹中，请把/gototop.js修改成/js/gototop.js。如果你使用的不是wordpress，你就需要把<?php bloginfo(’stylesheet_directory’); ?>/gototop.js中的位置改成html格式的相对地址。
3.在需要使用的位置放入下列代码即可
1 | <a href="javascript:void(0)" onclick="goto_top()">返回顶部</a> |
第二种方法需要利用css定义一个盒子，然后通过css来定位盒子，然后通过一张图片来显示“返回顶部”。
1.首先打开当前使用主题的css文件，添加一个id选择器或者class选择器
1 2 3 4 | #top{position:fixed;top:75%;left:50%;margin-left:600px;display:block;} /* 使用position的fixed使id=“top”的对象固定于浏览器中，相对的上距离为75%， 左距离为50%（即居中），盒子的距离浏览器的左边框600px （可以通过margin的left,right,top,bottom属性来自行控制） */ |
2.如果需要在首页显示这个浮动，对index.php进行修改，在index.php中添加下列代码
1 2 3 | <div id="top"><script src="<?php bloginfo('stylesheet_directory'); ?> /js/gototop.js" type="text/javascript" charset="utf-8"></script> </div> |
通过div来控制id=top这个盒子的位置，再在盒子中链接gototop.js。
3.在插入用一张图片，来替换掉文字即可。演示站中使用的top图片下载
1 2 | <a href="javascript:void(0)" onclick="goto_top()" title="返回顶部"> <img src="<?php bloginfo('stylesheet_directory'); ?>/images/top.gif"></a> |
恩，这就是jQuery的强大之处，对这个有疑问的童鞋可以留言，我会第一时间回复的
本站原创，转载请注明： 转载自Flox's Blog
本文链接地址: 使用jQuery滑动代码实现返回顶部
在 
在 
Twitter
没看见你用这个技术
@Firm, 看our.flox.in这个站吧
第一种代码我试过，的确有漂移效果的返回顶部，但是返回顶部之后再把网页往下拉就被自动拉回顶部了。不知道是什么原因。
第二种代码还没试过，不知道效果如何。
如果能把你这个网页右边的固定浮窗的代码做成可以添加自定义超链接的效果就好了。