网页布局-------页面滚动到一定位置显示返回顶部按钮

页面结构

<div class="slide-shop">
        <ul>
            <li>
                <a>
                    <div class="slide-shop-div">
                        <!-- <img src="./images/98a23aae70f25798192693f21c4d4039.png" /> -->
                        <i class="iconfont">&#xe622;</i>
                    </div>
                    <p>手机app</p>
                </a>
            </li>
            <li>
                <a>
                    <div class="slide-shop-div">
                        <!-- <img src="./images/98a23aae70f25798192693f21c4d4039.png" /> -->
                        <i class="iconfont">&#xe629;</i>
                    </div>
                    <p>手机app</p>
                </a>
            </li>
            <li>
                <a>
                    <div class="slide-shop-div">
                        <!-- <img src="./images/98a23aae70f25798192693f21c4d4039.png" /> -->
                        <i class="iconfont">&#xe615;</i>
                    </div>
                    <p>手机app</p>
                </a>
            </li>
            <li>
                <a>
                    <div class="slide-shop-div">
                        <!-- <img src="./images/98a23aae70f25798192693f21c4d4039.png" /> -->
                        <i class="iconfont">&#xe615;</i>
                    </div>
                    <p>手机app</p>
                </a>
            </li>
            <li>
                <a>
                    <div class="slide-shop-div">
                        <!-- <img src="./images/98a23aae70f25798192693f21c4d4039.png" /> -->
                        <i class="iconfont">&#xe615;</i>
                    </div>
                    <p>手机app</p>
                </a>
            </li>
            <li class="slide-shop-li-click">
                <a>
                    <div class="slide-shop-div">
                        <i class="iconfont">&#xe615;</i>
                    </div>
                    <p>返回顶部</p>
                </a>
            </li>
        </ul>
    </div>

页面样式

slide-shop{
    width: 84px;
    height: 561px;
    position: fixed;
    right: 0;
    top:200;

}
.slide-shop>ul>li{
    width: 82px;
    height: 90px;
    border: 1px solid #f5f5f5;
    background-color: #fff;
}
.slide-shop-div{
    width: 30px;
    height: 30px;
    margin: 0 auto 8px;
    padding-top: 18px;
    margin-bottom: 8px;
}
.slide-shop-div>i{
    /* width: 30px;
    height: 30px; */
    font-size: 25px;
}
.slide-shop>ul>li>a>p{
    color: #757575;
    font-size: 14px;
}
.slide-shop>ul>li:hover>a>p,.slide-shop>ul>li:hover>a>div>i{
    color: #FF6700;

}
.slide-shop-li-click{
    margin-top: 20px;
}

实现功能

    <script src="./jquery.min.js"></script>
    <script>
            $(function() {
        $(window).scroll(function() {
            var scroHei = $(window).scrollTop();//滚动的高度
            if (scroHei > 784) {
                $('.slide-shop-li-click').fadeIn();
            } else {
                $('.slide-shop-li-click').fadeOut();
            }
        })
        /*点击返回顶部*/
        $('.slide-shop-li-click').click(function() {
            $('body,html').animate({
                scrollTop: 0
            }, 300);
        })
    })
    </script>