WordPress实现滚动页面后出现返回顶部按钮

今天又给大家带来一款 WordPress 网站常用的 Jquery 特效：返回顶部，同样的必须网站首先引用 jquery，小白记得替换 js 路径哦

<script type="text/javascript" src="jquery.js"></script>

然后在主题 js 文件里面添加下面代码就可以啦，小白请看：Script 脚本文件转换 js 文件调用

$("#BackToTop").click(function () {
        var speed=200;//滑动的速度
        $('body,html').animate({ scrollTop: 0 }, speed);
        return false;
 });

其中 BackToTop 是你的触发返回顶部的元素 ID。你可以通过 css 来定位这个 id 的位置，小白请看：wordpress 必知的 css 布局知识

上面的代码也可以直接写成

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

如果需要页面滚动超过一屏时显示返回顶部按钮，则需要下面的代码：

$(document).ready(function(){  
    $("#BackToTop").hide();  
    $(function () {  
        var height=$(window).height();  
        $(window).scroll(function(){  
            if ($(window).scrollTop()>height){  
                $("#BackToTop").fadeIn(500);  
            }else{  
                $("#BackToTop").fadeOut(500);  
                }  
        });  
        $("#BackToTop").click(function(){  
            $('body,html').animate({scrollTop:0},200);  
            return false;  
        });  
    });  
});

之前陌小雨还分享过：Jquery 特效：点击文字或图片隐藏指定 div