飞龙博客

妙法莲华经

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

feilong.org 修订于2011-12-06 11:25:18

参考网上一些资料,飞龙整理了这个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 于广州

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

所在分类: 日记

新作:

旧文: