网站添加简单的返回顶部特效

发布日期:2020-02-05 12:03:06

  • 正文内容
  • 相关推荐

效果图:

首先引入js代码

$(function(){
        //当滚动条的位置处于距顶部100像素以下时,跳转链接出现,否则消失
        $(function () {
            $(window).scroll(function(){
                if ($(window).scrollTop()>100){
                    $("#backtop").css("bottom","1px");
                }
                else
                {
                    $("#backtop").css("bottom","-100px");
                }
            });
 
            //当点击跳转链接后,回到页面顶部位置
            $("#backtop").click(function(){
                //$('body,html').animate({scrollTop:0},1000);
        if ($('html').scrollTop()) {
                $('html').animate({ scrollTop: 0 }, 1000);
                return false;
            }
            $('body').animate({ scrollTop: 0 }, 1000);
                 return false;            
           });       
     });    
});
CSS部分:

#backtop{position:fixed;right:7.5%;bottom:-100px;z-index:2;overflow:auto;width:54px;height:54px;border-top-right-radius:50px;border-top-left-radius:50px;background-image:url(btt.png);background-position:0 0;cursor:pointer;-webkit-transition:all .5s ease-in-out;-moz-transition:all .5s ease-in-out;-o-transition:all .5s ease-in-out;transition:all .5s ease-in-out;-ms-transition:all .5s ease-in-out}
html部分:

<div id="backtop" title="返回顶部" style="bottom: -100px;"></div>

作者信息
头像
描述: ღ 我愿用一世阳光换你的微笑 ღ

本文标签:

文章标题:网站添加简单的返回顶部特效

文章链接:https://www.dcqzz.cn/post/1113

版权声明:若无特殊注明,本文皆为 四月天 原创,转载请保留文章出处。

发表评论

电子邮件地址不会被公开。 必填项已用*标注