Question

如何显示和隐藏scrolltotop的潜水。条件： 1.当用户下挫至80像素时，将显示 2.如果用户点击它，它将把用户带到顶部。 3.如果用户在某个位置停留2秒或更长时间（可能是200px或更多或更少），则还会隐藏scroolbar。如果他向上或向下滚动，那么可见的是scroolbar。

 $(document).ready(function () {
    $("#scrollup").hide('slow')

    $(window).scroll(function (e) {
        e.preventDefault();
        if ($(window).scrollTop() > 80) {
            $("#scrollup").show('slow');
        }
        if ($(window).scrollTop() < 80) {
            $("#scrollup").hide('slow');
        }
    });

    $(".scrollup").click(function () {
        $("html, body").animate({ scrollTop: 0 }, 500);
        return false;
    });
});

我已经完成了1和2条件，但我怎么能实现3？

Answer 1

添加setInterval(function(){ $("#scrollup").hide('slow'); }, 2000);并在滚动

上清除它

var idleInterval=null;
$(document).ready(function () {
    $("#scrollup").hide('slow');

    $(window).scroll(function (e) {
        if(idleInterval != null)
        clearTimeout(idleInterval);
        idleInterval = setInterval(function(){ $("#scrollup").hide('slow'); }, 2000);
        idleTime = 0;
        e.preventDefault();
        if ($(window).scrollTop() > 80) {
            $("#scrollup").show('slow');
        }
        if ($(window).scrollTop() < 80) {
            $("#scrollup").hide('slow');
        }
    });

    $(".scrollup").click(function () {
        $("html, body").animate({ scrollTop: 0 }, 500);
        return false;
    });
});

<强>演示： -

＆＃13;

var idleInterval=null;
$(document).ready(function () {
    $("#scrollup").hide('slow');

    $(window).scroll(function (e) {
        if(idleInterval != null)
        clearTimeout(idleInterval);
        idleInterval = setInterval(function(){ $("#scrollup").hide('slow'); }, 2000);
        idleTime = 0;
        e.preventDefault();
        if ($(window).scrollTop() > 80) {
            $("#scrollup").show('slow');
        }
        if ($(window).scrollTop() < 80) {
            $("#scrollup").hide('slow');
        }
    });

    $(".scrollup").click(function () {
        $("html, body").animate({ scrollTop: 0 }, 500);
        return false;
    });
});

＆＃13;

#pagewrap{
  height:1000px;
}
#scrollup {
    position: fixed;
    color: white;
    padding: 10px 30px;
    background: red;
    bottom: 30px;
    right: 30px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="pagewrap">
	<h1>Demo</h1>
	<h2><a href="http://webdesignerwall.com/tutorials/animated-scroll-to-top">Animated Scroll to Top</a></h2>
<div id="scrollup">
  scroll to top
</div>

</div>

＆＃13;

ScroolToTop根据用户的滚动显示和隐藏

1 个答案: