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

Author: 陌小雨Date: 2017-08-11View: 88

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