一、确保你的主题已经加载jQ库,然后将以下js代码以gototop.js文件保存,放在主题的目录下:
创新互联是一家集网站建设,若羌企业网站建设,若羌品牌网站建设,网站定制,若羌网站建设报价,网络营销,网络优化,若羌网站推广为一体的创新建站企业,帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿,时刻以成就客户成长自我,坚持不断学习、思考、沉淀、净化自己,让我们为更多的企业打造出实用型网站。
jQuery(document).ready(function($) {
$body = (window.opera) ? (document点抗 patMode == "CSS1Compat" ? $("html") : $("body")) : $("html,body");
$("#shang").mouseover(function() {
up()
}).mouseout(function() {
clearTimeout(fq)
}).click(function() {
$body.animate({
scrollTop: 0
},
400)
});
$("#xia").mouseover(function() {
dn()
}).mouseout(function() {
clearTimeout(fq)
}).click(function() {
$body.animate({
scrollTop: $(document).height()
},
400)
});
$("#comt").click(function() {
$body.animate({
scrollTop: $("#comments").offset().top
},
400)
});
});
function up() {
$wd = $(window);
$wd.scrollTop($wd.scrollTop() - 1);
fq = setTimeout("up()", 50)
};
function dn() {
$wd = $(window);
$wd.scrollTop($wd.scrollTop() + 1);
fq = setTimeout("dn()", 50)
};
二、打开主题的footer.php,在最后加入以下代码:
script type="text/javascript" src="?php bloginfo('template_directory');?/js/gototop.js"/script
div id="shangxia"
div id="shang" title="↑ 返回顶部"/div
?php if ( is_singular() ){ ?
div id="comt" title="查看评论"/div
?php } ?
div id="xia" title="↓ 移至底部"/div
/div
/js/gototop.js需要改为与你的实际路径。
三、将以下css代码丢入主题的style.css中:
#shangxia{position:fixed;top:45%;right:50%;display:block;margin-right:-540px;z-index:999;}
#shang,#comt,#xia{background:url(gototop.png) no-repeat;position:relative;cursor:pointer;
height:25px;width:29px;margin:10px 0 0;}
#comt{background-position:left -30px;height:32px;}
#xia{background-position:left -68px;}
#comt:hover{background-position:right -30px;}
#shang:hover{background-position:right 0;}
#xia:hover{background-position:right -68px ;}
上面的css相关代码有些需要修改。
一般在主题模板里面修改,如果主题代码里面没找到你需要改的话,可以在外观/菜单,里面看看是不有你要改的地址。
WordPress网站返回顶部按钮添加方法:
重写window.onscroll()事件,先将返回顶部div设置为position:fixed;right:10px;bottom:10px;display:none,一旦event.scrollTop100(100可以设置为你想要的值)就display:block(fadeIn()),否则display:none(fadeOut())。还要设置返回顶部div点击事件,onclick(function(){$('body,html').animate({scrollTop:0},1000);}),这个什么意思不用我多说吧,既然搞Jquery,动画还是应该晓得。
style type="css/text"
#gotop{position:fixed;right:10px;bottom:10px;display:none}
/style
div id="gotop"/div
script type="javascript/text"
$(function(){
$(window).scroll(function(){
if($(window).scrollTop 100){
$("#gotop").fadeIn(1000);//一秒渐入动画
}else{
$("#gotop").fadeOut(1000);//一秒渐隐动画
}
});
$("#gotop").click(function(){
$('body,html').animate({scrollTop:0},1000);
});
});
/script
用户一般都是自上而下浏览完网站,浏览完后就要返回网站顶部,一般的网站都添加了返回顶部的功能,方便用户快速到达网站顶部,而不必去滚动鼠标。如果你不懂得代码,没关系,wp auto top这个WordPress插件将帮你实现这个功能。
下面将详细介绍WordPress返回顶部插件wp auto top的使用方法。
1/3
先安装wp auto top插件。登陆WordPree后台,按如下步骤操作:
2/3
安装好了之后,不用任何设置,打开网站首页,在左侧会看到如下图的两个箭头,点击向上的箭头,回到网站顶部,点击向下的箭头,回到网站底部。
3/3
另外,我们在“设置”》“wp-auto-top”里面可以设置它的图片颜色、显示页面、显示位置、浮层层高等等。