返回顶部功能jquery实现代码

2018-07-20    来源:open-open

容器云强势上线!快速搭建集群,上万Linux镜像随意使用

当窗口在第一屏时不显示返回顶部,滚动到第二屏是现实返回顶部,点击后平滑滚轮回到顶端。

$(document).ready(function() {

    // hide #back-top first
    $("#back-top").hide();

    // fade in #back-top
    $(function() {
        $(window).scroll(function() {
            if ($(this).scrollTop() > 100) {
                $('#back-top').fadeIn();
            } else {
                $('#back-top').fadeOut();
            }
        });

        // scroll body to 0px on click
        $('#back-top a').click(function() {
            $('body,html').animate({
                scrollTop: 0
            }, 800);
            return false;
        });
    });

});

HTML USAGE:

<p id="back-top" style="display: block; ">
   <a href="#top"><span></span><em>Back to top</em></a>
</p>

标签: isp

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点!
本站所提供的图片等素材,版权归原作者所有,如需使用,请与原作者联系。

上一篇:Ruby 连接PostgreSQL

下一篇:载入图像时显示正在载入中的jQuery实现