JavaScript의 부드러운 스크롤
이 기사에서는 JavaScript에서 부드러운 스크롤 기능을 사용하는 방법에 대해 설명합니다. 예를 들어 스크롤 기능을 호출하는 이벤트를 만듭니다.
페이지 내 탐색 경험을 향상시키기 위해 사용자 인터페이스 패턴인 부드러운 스크롤을 사용합니다. 페이지의 스크롤 상자 내에서 애니메이션으로 위치를 변경하는 것입니다.
JavaScript, jQuery 및 기타 플러그인의 도움으로 스크롤 패턴을 만들고 구현하는 방법은 여러 가지가 있지만 지금은 이 기능을 위해 jQuery 솔루션과 함께 JavaScript를 사용합니다.
JavaScript의 부드러운 스크롤
JavaScript에서는 웹 페이지의 현재 위치를 변경하고 애니메이션처럼 다른 위치로 이동하는 클릭 이벤트에 대한 함수를 호출할 수 있습니다.
jQuery에는 scrollTop, 타이머로 밀리초, 스크롤이 완료된 후 호출되는 콜백 함수를 사용하여 객체를 포함하는 위치에서 개체를 전달하는 기본 메서드 animate()가 있습니다.
예제 코드:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
// smooth scrolling function on anchor tag
$("a").on('click', function(event) {
// if this.hash contain value
if (this.hash !== "") {
//default anchor click prevention
event.preventDefault();
// save hash
var myHash = this.hash;
// jQuery animate() method to call scroll
// 1200 milliseconds takes to scroll to the desired area
$('html, body').animate({
scrollTop: $(myHash).offset().top
}, 1200, function(){
// when done scroll add # to URL
window.location.hash = myHash;
});
} // End if
});
});
</script>
<style>
#section_top {
height: 600px;
border-style: solid;
border-width: 1px;
padding:5px
}
#section_down {
height: 600px;
border-style: solid;
border-width: 1px;
padding:5px
}
</style>
</head>
<body>
<h1>Delftstack learning</h1>
<h4>Smooth scrolling using JavaScript.</h4>
<div class="main" id="section_top">
<h2>Top Section</h2>
<a href="#section_down">Click here to Smooth Scroll to down Section</a>
</div>
<div class="main" id="section_down">
<h2>Down Section</h2>
<a href="#section_top">Click here to Smooth Scroll to top Section</a>
</div>
</body>
</html>
위의 HTML 소스 코드에서 HTML 및 CSS의 <div> 요소를 사용하여 여러 섹션을 만들었습니다. 위치를 변경하고 스타일을 구현하기 위해 섹션에 대한 ID를 정의했습니다.
두 섹션 모두에 앵커 태그를 생성하고 해당 요소에 href를 정의했습니다. HTML 페이지의 헤드에 jQuery 기본 메서드 animate()를 사용하기 위한 jQuery 링크가 포함되어 있습니다.
스크립트 태그에서 앵커 태그 클릭 시 스크롤 기능을 호출했습니다. 스크롤 기능 내에서 해시 값을 확인해야 합니다. 값이 있으면 실행을 계속합니다.
앵커 태그의 기본 동작을 방지하고 현재 해시를 저장했습니다. 1200밀리초 타이머와 원하는 스크롤 위치로 jQuery 함수 animate()를 호출했습니다.
위의 소스를 HTML 확장자로 저장하고 아무 브라우저에서나 열면 부드러운 스크롤 결과를 볼 수 있습니다.