3种方法实现WordPress返回顶部功能

文章热度: 544 ℃ | 分类: WordPress图文教程

标签:

3种方法实现WordPress返回顶部功能

发表于: 2012 年 11 月 30 日 | 10 条评论

“回到顶部”相信已经是所有网站必不可须的一项功能,很多WordPress主题也已经把这个功能集成到了主题当中,因为它提高的不仅仅是用户体验

那么…如果你的网站至今还没有添加这个功能,请参考以下3种方法。

HTML页面锚点实现

第一步:定义一个锚链接,HTML元素有name属性,如:

<div name="top"></div>

第二步:将链接指向锚位置,里面的“id”即为上面定义的“top”,如:

<a href="#id">返回顶部</a>

WordPress插件实现

WordPress有很多实现返回顶部功能的插件,这里推荐两款:

Dynamic “To Top”,点击这里查看此插件下载与使用教程

Go To Top ,点击这里查看此插件下载与使用教程

jQuery实现

这种方法是WP巴士推荐使用的方法,而且此方法可以实现博客回到顶部、底部和查看评论的按钮功能,具体步骤如下:

步骤一,添加PHP + HTML代码,将下面代码添加到 footer.php 或 header.php

<?php if (!is_singular()) { ?>
<?php if (!is_singular()) { ?>
    <div id="shangxia">
    <div id="shang"></div><div id="xia"></div>
</div>
<?php } else { ?>
    <div id="shangxia">
    <div id="shang"></div><div id="comt"></div><div id="xia"></div>
</div>
<?php } ?>

步骤二,添加css代码,其中的图片素材可以自己ps一个

/*右靠模式*/
#shangxia{
    position:fixed;top:45%;right:50%;
    display:block;margin-right:-540px;
    z-index:999;
}
/*左靠模式===使用时请删掉下边一句的注释*/
/*#shangxia{
    position:fixed;top:45%;left:50%;
    display:block;margin-left:-540px;
    z-index:999;
}*/

/*以下勿动*/
#shang,#comt,#xia{
    background:url(你的图片路径) 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 ;}

步骤三,添加jQery代码

jQuery(document).ready(function($) {
$body = (window.opera) ? (document.compatMode == "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)
};

本文转载自:http://www.tedlife.com/non-plug-ins-back-to-the-top-of-the.html


除非注明,网站文章均为原创,转载请标明本文地址
本文地址: http://www.wpbus.com.cn/three-kinds-of-to-return-to-the-top.html





上一篇:
下一篇:

关于小编:爱博客、爱游戏、爱熬夜又爱睡觉。梦想环游世界,现实宅在家中...

新浪微博 | 腾讯微博 | 订阅我们