JavaScript Div 맨 위로 스크롤
Anika Tabassum Era
2023년6월20일
-
JavaScript에서
scrollIntoView()메서드를 사용하여 Div 맨 위로 스크롤 -
scrollTo()메서드를 사용하여 JavaScript에서 Div의 맨 위로 스크롤
JavaScript에서는 웹 페이지를 통한 내부 링크 및 스크롤을 위해 여러 가지 방법을 사용할 수 있습니다. anchor 태그의 href를 id로 직접 설정하고 해당 섹션까지 스크롤할 수도 있습니다.
그러나 동적 드라이브의 경우 작업을 수행하는 JavaScript 방식으로 전환합니다.
다음 섹션에서는 scrollIntoView() 및 scrollTo() 메서드를 시연합니다. 두 방법 모두 유사한 기능을 가지고 있지만 scrollIntoView()는 매개 변수 없이 작동할 수 있으며 scrollTo()에는 일부 지정된 지점이 필요할 수 있습니다.
예제를 확인해 봅시다.
JavaScript에서 scrollIntoView() 메서드를 사용하여 Div 맨 위로 스크롤
기술적으로 메서드는 메서드 선언 외에는 아무것도 필요하지 않습니다. 먼저 최상위 div 요소에 대한 인스턴스를 시작한 다음 보조 scrollIntoView()를 사용합니다.
결과적으로 링크 이벤트는 특히 해당 상단 부분에 대한 보기를 가져옵니다. 다음 코드 행에서 자세히 설명합니다.
코드 조각:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
#top{
height:200px;
background:pink;
}
#buff{
height:800px;
}
</style>
</head>
<body>
<div id="top"></div>
<div id="buff"></div>
<a href="javascript: scroll()">Jump to top of page</a>
<script>
function scroll(){
var top = document.getElementById("top").scrollIntoView({behavior: 'smooth'}, true);
}
</script>
</body>
</html>
출력:
-Method-to-Scroll-to-Top.webp)
scrollTo() 메서드를 사용하여 JavaScript에서 Div의 맨 위로 스크롤
scrollTo() 메소드는 매개변수를 사용하여 뷰포트 측정을 재설정합니다. 일반적으로 뷰포트의 현재 상태는 x축과 y축에 위치합니다.
나중에 최상위 세그먼트에 도달하기 위해 현재 위치를 재설정하므로 div의 최상위에 있게 됩니다.
코드 조각:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
#top{
height:200px;
background:orange;
}
#buff{
height:800px;
}
</style>
</head>
<body>
<div id="top"></div>
<div id="buff"></div>
<a href="javascript: scroll()">Jump to top of page</a>
<script>
function scroll(){
var top = document.getElementById("top")
window.scrollTo(0,0);
}
</script>
</body>
</html>
출력:
-Method-to-Scroll-to-Top.webp)
