放出wordpress 上下滑动滚屏回到顶部代码
feilong.org 修订于2011-12-06 11:25:18 您好,第 325 位朋友!参考网上一些资料,飞龙整理了这个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 于广州
加入收藏夹,查看更方便。
所在分类: 日记