^ 回到顶部
  • 人生没有定律,每个人都有自己的节奏
  • 若文中代码有问题,可能是少了几个问号,留言一定会解决!
  • 希望你的坚持,都是因为热爱,而不是因为不甘心
  • 站点文章结尾新增了赞赏通道
  • 那些不愿意让你吃亏的人,才是真正值得你深交的人,也是值得你付出时间的人

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

历史上的今天:
让小雨知道,这篇文章帮到了你

展开阅读全文

评论 0

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

登录

忘记密码 ?

切换登录

注册