飞龙博客

前端文字教程

放出wordpress 上下滑动滚屏回到顶部代码

feilong.org 修订于2011-12-06 11:25:18 您好，第 463 位朋友！

参考网上一些资料，飞龙整理了这个wordpress 上下滑动的代码，便于回到顶部或直到底部，如果在日志页或单页可以直接转到评论部分。本日志修订网址：http://feilong.org/shangxia-slide-gototop-wordpress 希望对你有用！

1、首先是放在footer.php的body标签前的HTML/PHP代码。结构采用一个div，3个a标签，div外围下是一个表明页面尾部的a标签。

<!--上下滑动 -->
<div id="shangxia">
<a id="shang" title="我要上天!"></a>
<?php if(is_singular()){ ?>
<a id="comt" title="我要评论!"></a>
<?php } ?>
<a id="xia" title="我要入地!"></a>
<!--huadong --></div>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/shangxia.js"></script>
<a id="tail"></a>
<!--上下滑动 -->

2、其次是以上HTML的css修饰代码，注意：images/shangxia.png 这个图片你可以自己设计，也可以搜索”wordpress上下滑动 回到顶部代码“，找到网上很多博友的现有例子，把他们的图片弄下来用。注意css里面表明的图片尺寸大小，还有后缀，你可以根据实际情况修改css！

#shangxia{display:block;position:absolute;top:50%;left:50%;margin:0 0 0 60px;}
#shangxia a{display:block;position:relative;z-index:9999;width:29px;height:25px;margin:10px 0 0 0;
background:url(http://www.yiyou.name/wp-content/themes/planetemo/images/huadong.png) no-repeat scroll 0 0 transparent;cursor:pointer;}
#shangxia a#shang:hover{background-position:right 0;}
#shangxia a#comt{height:32px;background-position:left -30px;}
#shangxia a#comt:hover{background-position:right -30px;}
#shangxia a#xia{background-position:left -68px;}
#shangxia a#xia:hover{background-position:right -68px;}

3、再次是此上下滑动特效的js，也就是上面HTML里面提到的shangxia.js ，注意基于jquery库的哟。

jQuery(document).ready(function($){
 
//feilong offset
var flkefu = $("#shangxia").offset().top;
$(window).scroll(function(){																									
var offsetTop = flkefu + $(window).scrollTop() +"px";
$("#shangxia").animate({top : offsetTop },{ duration:500 , queue:false });
});//1
 
// feilong click and go
$body = (window.opera) ? (document.compatMode == "CSS1Compat" ? $('html') : $('body')) : $('html,body');
$('#shang').click(function(){$body.animate({scrollTop: '0px'}, 400);});
$('#comt').click(function(){$body.animate({scrollTop:$('#respond').offset().top}, 800);});
$('#xia').click(function(){$body.animate({scrollTop:$('#tail').offset().top}, 600);});
//1
 
});//0

4、最后当然是调用jquery库。一般来说，wordpress有内置的jquery库。所以你最好先查看主题前台的源代码，搜索“jquery.js”, 看是否已经载入jquery库。

如果没有则添加一下jquery调用代码在header.php

<script type='text/javascript' src='<?php bloginfo('url'); ?>/wp-includes/js/jquery/jquery.js?ver=1.6.1'></script>

5、好了就这么简单，如果你安装有问题，欢迎联系飞龙。

更新网址：https://feilong.org/shangxia-slide-gototop-wordpress
最初发布：20111206 11:25:18 feilong.org 于广州

加入收藏夹，查看更方便。

所在分类： 日记

新作：

旧文：