버튼을 클릭 할 때까지 창 스크롤을 접을 수 없음

Question

특정 지점을지나 스크롤 할 수없는 페이지가 필요합니다. (나는 영웅을 100vh로 설정하고 사용자가 스크롤 할 수 없어야합니다.) 그리고 나서 버튼을 클릭하면 스크롤 방지가 비활성화되고 사용자는 자동으로 아래 바로 아래의 앵커 링크 (기본적으로 100vh 또는 전체 창 높이로 스크롤)로 부드럽게 스크롤됩니다. 빠른 점프가 아닌 매끄러운 스크롤 애니메이션이 필요합니다.

다음 코드를 다양한 방법으로 사용해 보았습니다. 지금까지 정말 버그가 있으며 주위에 점프하고 페이지를 다시로드 할 때 본문 오버플로가 숨김으로 설정되어 있지만 창 위치가 항상 화면의 맨 위에있는 것은 아니므로 스크롤해야 볼 수있는 내용 중 일부가 여전히 보이지만 여전히 캔트 스크롤을 볼 수 있습니다 .

function() { 

function smoothScroll(){ 
    windowHeight = $('window').height(); 
    $('html, body').stop.animate({scrollTop: windowHeight}, slow); 
} 

$('.bottom-nav').on('click', '.fold-trigger', function(event) { 
    $('.home').css('overflow', 'visible'); 
    setTimeout(smoothScroll(), 1000); 

}); 

}; 

바이올린은 여기에 있습니다 : https://jsfiddle.net/njpatten/yxkvnymu/1/

Answer 1

고정 코드

function smoothScroll(){ 
    windowHeight = $(window).height(); 
    $('html, body').stop().animate({scrollTop: windowHeight}, "slow"); 
} 

$('.bottom-nav').on('click', '.fold-trigger', function(event) { 
    $('.home').css('overflow', 'visible'); 
    setTimeout(smoothScroll(), 1000); 

}); 

고정 바이올린 : https://jsfiddle.net/yxkvnymu/2/

설명

존재하지 않는 '창'DOM 요소를 검색하는 $('window').height()을 실행하여 창 높이를 가져 오려고합니다. window은 DOM 노드가 아니기 때문에 $(window).height() (윈도우 둘러싼 따옴표 생략)을 사용하려는 경우 객체입니다.

또한 여러 오류가있는 $('html, body').stop.animate({scrollTop: windowHeight}, slow);을 사용하고 있습니다. 에서 반환 된 NodeList의 stop 속성이 호출 할 함수이기 때문에 .stop이 유효하지 않습니다. $('html, body').stop()을 사용해야합니다.

또한 animate 부분이 변수 slow을 참조하고 있습니다. 대신,

.animate({scrollTop: windowHeight}, "slow"); 

주에게 그에 따옴표의 포함을 우리가 jQuery의 애니메이션 기능에 "slow"의 문자열 값을 전달하려는 이유는 jQuery의 애니메이션 기능은 문자열로 "slow" 소요, 그래서 선은 같은 작성해야 변수 slow

마지막으로 불필요한 것으로 보이는 모든 코드를 익명으로 처리하고 있습니다.