放出wordpress 上下滑动滚屏回到顶部代码 (595)
参考网上一些资料，飞龙整理了这个wordpress 上下滑动的代码，便于回到顶部或直到底部，如果在日志页或单页可以直接转到评论部分。本日志修订网址：http://feilong.org/shangxia-slide-gototop-wordpress 希望对你有用！
1、首先是放在footer.php的body标签前的HTML/PHP代码。结构采用一个div，3个a标签，div外围下是一个表明页面尾部的a标签。
|
1 2 3 4 5 6 7 8 9 10 11 |
<!--上下滑动 --> <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！
|
1 2 3 4 5 6 7 8 |
#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库的哟。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
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
|
1 |
<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
2011-12-06 ~ 2011-12-06
加入收藏夹，查看更方便。
分类： 日记