js控制页面回到顶部

前端之家收集整理的这篇文章主要介绍了js控制页面回到顶部前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

页面下拉一定距离的时候出现一个图标点击图标回到页面顶部

HTML代码

<section class="footer-popup">
    <a class="side_btn top" id="back-to-top" href="javascript:;" title="返回顶部"
       style="display: none;
            width: 45px;
            height: 45px;
            background:url(/home/default/images/top_bg.png) no-repeat -1px -47px;">
    </a>
</section>

js代码

<script>
    $(window).scroll(function () {
        //获取滚动条距离顶部高度
        var scrollTop = $(window).scrollTop();
        //滚动条距离顶部高度为300的时候出现图标
        scrollTop > 300 ? $("#back-to-top").fadeIn(200).css("display","block") : $("#back-to-top").fadeOut(200);
    });
    //返回顶部
    $('#back-to-top').click(function (e) {
        $('html,body').animate({ scrollTop:0});
    });
</script>


<p style="text-align: center;">

<img src="/res/2019/04-05/15/d0e9abaf79b0ee8b6d697c8dc60afdb2.jpg" title="js控制页面回到顶部" alt="js控制页面回到顶部">

猜你在找的jQuery相关文章