jQuery - 버튼 클릭시 앵커로 스크롤

Question

사용자가 웹 페이지에서 버튼을 눌렀는지 확인하는 간단한 스크립트를 만들려고합니다. 사용자가 특정 div를 지나쳤는지 확인한 후 페이지가 다른 항목으로 스크롤하면 아무 일도 일어나지 않습니다.

엄밀히 말하면, DOM은 앵커로 스크롤하기 때문에 코드가 작동하지만 부작용으로 스크롤 한 후에 스크롤 할 수 없습니다.

$("#scrollDownBttn").click(function(){ 

    var mainOffset = $("#pinkRegion").offset().top; 

    $(document).on('scroll', function() { 
     if ($(document).scrollTop() > mainOffset) { 
       $(document).scrollTop($("#brownRegion").offset().top); 

     } 
     else{ 

     } 

    }); 
}); 

나는 jQuery에 익숙해 지려고 노력하고 있지만 분명히 나는 ​​갈 길이 멀다. 나는 왜 그것이 전체 페이지를 얼려야하는지 파악할 수 없다. 그게 왜 그런가?

Answer 1

$("#scrollDownBttn").click(function(){ 

    var mainOffset = $("#pinkRegion").offset().top; 


     if ($(document).scrollTop() > mainOffset) { 
       $(document).scrollTop($("#brownRegion").offset().top); 

     } 
     else{ 

     } 


}); 

크롤 이벤트에게 속임수를 썼는지,

Answer 2

이 시도 :

$("#scrollDownBttn").click(function(){    
    $('html, body').animate({ 
      scrollTop: $("#pinkRegion").offset().top 
     }, 500); 
});