首页 » 开源/框架 » WordPress » 正文

在WordPress中添加返回顶部的功能

| WordPress | 10 条评论 | (6评) |

对于页面内容比较长的网站，返回顶部的功能是比较需要的。网上的实现方法也不少，包括用百度新闻中的JS脚本的，还有用JQuery的。我个人比较喜欢金山网站的招聘信息中所用的返回顶部的代码和图片，但是那个代码有Bug，存在不兼容Chrome浏览器的问题（我会争取今天把问题反馈给他们），昨天晚上改了两三个小时，终于大体上改好了，现在分享如下。

1. 在style.css中添加如下代码

#gotop{
    width:38px;
    height:36px;
    position:fixed;
    bottom:25px;
    right:10px;
    top:auto;
    display:block;
    cursor:pointer;
    background: url(myimages/top.gif) no-repeat
}

*html #gotop{
    position:absolute;
    bottom:auto; top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));
}

其中，bottom和right属性可以控制按钮图片在右下角的位置，background属性可以修改返回顶部的图片。

2. 在footer.php中添加如下代码

<!-- 返回顶部 -->
<div style="display: none;" id="gotop"></div>
<script type='text/javascript'>
    backTop=function (btnId){
        var btn=document.getElementById(btnId);
        var d=document.documentElement;
        var b=document.body;
        window.onscroll=set;
        btn.onclick=function (){
            btn.style.display="none";
            window.onscroll=null;
            this.timer=setInterval(function(){
                d.scrollTop-=Math.ceil((d.scrollTop+b.scrollTop)*0.1);
                b.scrollTop-=Math.ceil((d.scrollTop+b.scrollTop)*0.1);
                if((d.scrollTop+b.scrollTop)==0) clearInterval(btn.timer,window.onscroll=set);
            },10);
        };
        function set(){btn.style.display=(d.scrollTop+b.scrollTop>100)?'block':"none"}
    };
    backTop('gotop');
</script>
<!-- 返回顶部END -->

 

其中，主要解决了Chrome浏览器不识别document.documentElement.scrollTop的问题，从网上找了相关的处理方法，说是使用

document.documentElement.scrollTop+document.body.scrollTop

来解决问题。然后我修改了代码，具体是第7、13、14、15、18行，完成了对Chrome浏览器的兼容。

3. 添加返回顶部按钮图片

下面图片是在金山网站上下载下来的，然后我又个人做了颜色加深的处理，不喜欢的朋友可以用自己的图片替换。如第一步中的background属性，把top.gif放到主题目录中存放图片的目录下。

top

本文共 10 个回复

  • 小二苘 2015/01/15 16:21

    正好想把原来的按钮换了，先收藏了

    回复

    • Specs 2015/01/15 16:52

      @ 小二苘 其实只需要这样一段就行了 

      $("#top").click(function() {
		$('body,html').animate({
			scrollTop: 0
		},
		1000);
		return false;
	});
      :grin:

      回复

      • 小二苘 2015/01/15 16:54

        @ Specs 还需要加载什么JS文件么？

        回复

        • Specs 2015/01/15 16:56

          @ 小二苘 不用，有jquery文件就行了，那个 1000 是返回到顶部所需的时间，1000毫秒，可以自己改~

          回复

          • 小二苘 2015/01/15 16:57

            @ Specs :smile: 感谢帮助，快下班了，我明天再折腾

            回复

      • 小二苘 2015/01/16 16:43

        @ Specs 你这个代码要加在哪里的？

        回复

  • 灰常记忆 2015/01/16 17:18

    :sad: 你的站 第一次打开有点慢

    回复

  • 小二苘 2015/01/16 20:02

    :lol: 文章里面的代码死了之后成功了，就是你在评论里给的代码怎么试都没反应，估计是我使用的方式不正确，最后我还是扒了歪果仁的主题的代码

    回复

发表评论

友情链接