放出wordpress 上下滑动滚屏回到顶部代码
feilong.org 修订于2011-12-06 11:25:18 251 次浏览参考网上一些资料，飞龙整理了这个wordpress 上下滑动的代码，便于回到顶部或直到底部，如果在日志页或单页可以直接转到评论部分。本日志修订网址：http://feilong.org/shangxia-slide-gototop-wordpress 希望对你有用！
1、首先是放在footer.php的body标签前的HTML/PHP代码。结构采用一个div，3个a标签，div外围下是一个表明页面尾部的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
5、好了就这么简单，如果你安装有问题，欢迎联系飞龙。
更新网址：https://feilong.org/shangxia-slide-gototop-wordpress
最初发布：20111206 11:25:18 feilong.org 于广州
加入收藏夹，查看更方便。
所在分类： 日记
