今天又给大家带来一款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

转载请注明：小雨科技 _武汉网站建设_武汉小程序搭建 » WordPress实现滚动页面后出现返回顶部按钮