ScroolToTop 사용자의 스크롤을 기준으로 표시 및 숨기기

Question

스크롤 탑의 다이브를 표시하고 숨길 수있는 방법. 조건 : 1. 사용자가 80px로 스크롤하면 이 표시됩니다. 2. 사용자가 클릭하면 상단으로 이동합니다. 3. 사용자가 특정 위치에서 2 초 이상 머물러 있으면 (200Xx 또는 그 이하), 스크롤 막대도 숨겨집니다. 스크롤을 위아래로 돌리면 스크롤바가 보입니다.

$(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; 
    }); 
}); 

데모을 취소 : -

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; 
 
    }); 
 
});

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="pagewrap"> 
 
\t <h1>Demo</h1> 
 
\t <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>