回到顶部按钮效果不对，另外还有一个问题

$.fn.UiBackTop=function(){//效果没出来，现在的效果是刚进入页面时有按钮，一滚动就消失
        var windowHeight=$(window).height(),
            ui=$(this),
            el=$('<a class="backtop" href="#"></a>');
        ui.append(el);
        $(window).on("scroll",function(){
            var top=$("html,body").scrollTop();
            //兼容性的写法
            //var top = $("body").scrollTop() || $(document).scrollTop();第二种写法
            if(top>windowHeight){
               el.show();
               }else{
               el.hide();
               }
        });
        $(el).on("click",function(){
            $(window).scrollTop(0);
        });
    };

.backtop{position: fixed;bottom: 2px;right: 2px;display: block;width: 40px;height: 40px;z-index: 9;color: white;
    background-color: #00b3ec;background-position: center center;
    background-image: url("../img/icon-go-up.png");background-repeat: no-repeat;}
.backtop:hover{background-image: none;}
.backtop:hover::after{content: '回到顶部';text-align: center;line-height: 20px;display: block;}

没有粘贴HTML主页了，老师可以弄个高度5000px的色块测试，效果不对

现在的效果：刚进入页面时有按钮，一滚动就消失

需要的效果：刚进入页面时没有按钮，滚动时超过窗口的高度或设置的高度显示，小于窗口的高度或设置的高度隐藏。显示的时候点击按钮会回到顶部。

另外的问题：现在回到顶部是直接回去，如何改写代码使得回去的时候有个滚动的动画效果，不知现阶段能否实现

迷失的小麦 2020-01-30

源自：实战：挂号平台首页 5-12 项目作业

收起

1回答

樱桃小胖子回答被采纳获得+3积分 2020-01-31 12:25:04

同学你好，老师帮你写了一个带动画且先隐藏，滚动到一定距离再显示的返回顶部的效果。同学可以根据代码进行改写

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>返回顶部</title>
    <script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
    <style type="text/css">
    .container {
        width:1280px;
        margin: 0 auto;
        height: auto;
        min-height: 100%;
        position: relative;
    }
    .content {
        height: 2000px;
        background: red;
    }
    .backtop {
        position: absolute;
        right: -130px;
        z-index: 5;
        width:60px;
        height:60px;
        background:blue;
    }
    </style>
</head>
<body>
    <div class="container">
        <div class="content">我是主内容，高度是2000px</div>
        <div class="backtop">返回顶部</div>
    </div>
    <script>
    $(function() {
        //backtop距浏览器顶端的距离，这个距离可以根据你的需求修改
        var topDistance = 500;
        //距离浏览器顶端多少距离开始显示backtop按钮，为了兼容不同分辨率的浏览器，建议这里设置值为1；
        var showDistance = 1;
        var thisTop = $(window).scrollTop() + topDistance;
        //设置backtop按钮top的css属性和属性值
        $('.backtop').css('top', thisTop);
        if ($(window).scrollTop() < showDistance) {
            $('.backtop').hide();
        }
        // 给窗口绑定一个滚动事件，当窗口滚动条滚动时执行
        $(window).scroll(function() {
            thisTop = $(this).scrollTop() + topDistance; //获取当前window向上滚动的距离
            $('.backtop').css('top', thisTop); //修改backtop按钮的top距离
            console.log(thisTop);
            if ($(this).scrollTop() > showDistance) {
                $('.backtop').fadeIn();
            } else {
                $('.backtop').fadeOut();
            }
        });
        // 给按钮绑定一个click事件，点击按钮时，返回顶部
        $('.backtop').click(function() {
            $('html ,body').animate({ scrollTop: 0 }, 300);
        });
    });
    </script>
</body>
</html>