jQuery에서 애니메이션 스크롤

1. jQuery에서 animate() 메서드를 사용하여 스크롤
2. jQuery에서 페이지 스크롤에 시간 제한이 있는 animate() 메서드 사용

jQuery는 복잡한 아이디어를 달성하기 위한 쉬운 구문으로 널리 홍보되는 반면 JavaScript ES6은 오늘날 강력한 경쟁자입니다.

div 또는 웹 페이지를 특정 높이로 스크롤하는 데 집중할 때 몇 가지 솔루션을 발견합니다. 그러나 jQuery animate() 메서드는 body 및 html의 인스턴스를 명시적으로 수락하고 기본 설정으로 스크롤합니다.

jQuery animate() 메서드를 통해 예제 세트에서 기본 수직 스크롤을 수행합니다. 후자의 예에서는 제한된 시간 프레임이 있는 인스턴스를 검사합니다.

jQuery에서 animate() 메서드를 사용하여 스크롤

이와 관련하여 body 및 html 요소의 인스턴스를 허용합니다. 따라서 규칙은 여러 브라우저가 제약 조건에 관계없이 함수를 실행할 수 있도록 하는 것입니다.

다음으로 인스턴스와 함께 animate() 메서드를 시작하고 scrollTop: "0" 사양을 설정합니다. scrollTop을 기본 설정 값으로 설정할 수도 있습니다.

이 경우 페이지는 맨 위로 라우팅되지 않습니다. 오히려 전체 페이지 높이와 scrollTop 값 사이의 거리까지 올라갈 것입니다.

코드 조각:

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<h4>TOP</h4>
<h4>TOP-20</h4>
<div id="pos" style="height: 600px;background:pink"></div><br>
<button onclick="press()">Go to Top</button>
<script>
function press(){
  $("html, body").animate({scrollTop: "20"});
}
</script>

출력:

jQuery에서 페이지 스크롤에 시간 제한이 있는 animate() 메서드 사용

이 예제에는 이전 예제와 유사한 기능이 포함되어 있습니다. 그러나 여기에 추가된 것은 setInterval 함수를 정의하지 않고 스크롤 타이밍을 설정할 수 있다는 것입니다.

우리가 할 일은 scrollTop 속성과 함께 선호하는 타이밍을 추가하는 것뿐입니다. 이것은 페이지 스크롤의 속도 값을 완화하거나 보장합니다.

코드 조각:

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<h4>TOP</h4>
<div id="pos" style="height: 600px;background:powderblue"></div><br>
<button onclick="press()">Go to Top</button>
<script>
function press(){
  $("html, body").animate({scrollTop: "0"}, 3000);
}
</script>

출력: