JavaScript에서 ID로 스크롤
-
scrollIntoView()메서드를 사용하여 JavaScript에서 ID로 스크롤 -
수동 보기 계산과 함께
scrollTo()메서드를 사용하여 JavaScript에서 ID로 스크롤 -
scrollLeft및scrollTop과 함께scrollTo()메서드를 사용하여 JavaScript에서 ID로 스크롤
일반적인 경우 HTML 본문에 앵커 태그를 설정하고 href를 특정 id로 설정하면 해당 요소로 스크롤할 수 있습니다. 그러나 이 관행은 동적 사례에 대해 대부분 환영받지 못합니다.
동일한 웹 페이지의 id로 스크롤할 때 내부 링크라고 합니다. 다음 예제에서 JavaScript 메서드를 통해 내부 링크를 수행하는 방법을 볼 수 있습니다.
scrollIntoView() 메서드는 특정 ID로 스크롤하는 가장 안정적인 방법입니다. 그러나 가장 중요한 경우는 올바른 querySelector를 얻는 것입니다.
그래야만 해당 요소로 라우팅할 수 있습니다. 그런 다음 scrollTo() 메서드를 사용하여 오프셋 설명을 설정합니다.
더 나은 이해를 위해 이러한 방법을 확인합시다.
scrollIntoView() 메서드를 사용하여 JavaScript에서 ID로 스크롤
JavaScript에서 특정 ID로 스크롤하려면 scrollIntoView() 메서드를 사용할 수 있습니다.
스크롤
작업 링크에서 상위 세그먼트의 요소로 스크롤하려면 scrollIntoView() 매개변수를 true로 설정합니다. 링크를 클릭하면 페이지가 스트레스를 받고 위의 목표에 도달하게 됩니다.
코드 조각:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Document</title>
<style>
#blue{
height: 200px;
background: blue;
}
#buff{
height:800px;
}
a{
text-decoration: none;
color: black;
}
</style>
</head>
<body>
<div id="blue"></div>
<div id="buff"></div>
<a href="javascript: scroll();">Get to BLUE</a>
<script>
function scroll(){
var getMeTo = document.getElementById("blue");
getMeTo.scrollIntoView({behavior: 'smooth'}, true);
}
</script>
</body>
</html>
출력:
아래로 스크롤
마찬가지로 여기에서 추가 매개변수를 false로 설정하므로 차이가 생성됩니다.
코드 조각:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Document</title>
<style>
#blue{
height: 200px;
background: blue;
}
#buff{
height:800px;
}
a{
text-decoration: none;
color: black;
}
</style>
</head>
<body>
<a href="javascript: scroll();">Get to BLUE</a>
<div id="buff"></div>
<div id="blue"></div>
<script>
function scroll(){
var getMeTo = document.getElementById("blue");
getMeTo.scrollIntoView({behavior: 'smooth'}, false);
}
</script>
</body>
</html>
출력:
수동 보기 계산과 함께 scrollTo() 메서드를 사용하여 JavaScript에서 ID로 스크롤
이 경우 처음에 요소를 선택한 다음 오프셋 값도 설정합니다. 다음 단계에서는 본문의 상단 위치를 파악하고 마찬가지로 .getBoundingClientRect() 메서드를 통해 요소의 상단 위치를 확인합니다.
다음으로 일반적인 수학 연산을 수행하여 원하는 스크롤 측정값을 얻습니다. 코드 펜스는 이것을 보다 직관적으로 보여줄 것입니다.
코드 조각:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Document</title>
<style>
#purple{
height: 200px;
background: purple;
}
#buff{
height:800px;
}
a{
text-decoration: none;
color: black;
}
</style>
</head>
<body>
<div id="purple"></div>
<div id="buff"></div>
<a href="javascript: scroll();">Get to Purple</a>
<script>
function scroll(){
const element = document.getElementById('purple');
const offset = 50;
const bodyRect = document.body.getBoundingClientRect().top;
const elementRect = element.getBoundingClientRect().top;
const elementPosition = elementRect - bodyRect;
const offsetPosition = elementPosition - offset;
window.scrollTo({
top: offsetPosition,
behavior: 'smooth'
});
}
</script>
</body>
</html>
출력:
-method-with-manual-calculation-of-the-view.webp)
scrollLeft 및 scrollTop과 함께 scrollTo() 메서드를 사용하여 JavaScript에서 ID로 스크롤
이 예제는 scrollTo() 메소드에 대한 속성 설정을 의미합니다. 구문은 이해하기 쉽습니다.
요소의 인스턴스를 가져오고 element.scrollTop 및 element.scrollLeft를 통해 스크롤의 상단 및 왼쪽 위치를 설정합니다. 코드베이스로 들어가 봅시다.
코드 조각:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Document</title>
<style>
#yellow{
height: 200px;
background: yellow;
}
#buff{
height:800px;
}
a{
text-decoration: none;
color: black;
}
</style>
</head>
<body>
<div id="yellow"></div>
<div id="buff"></div>
<a href="javascript: scroll();">Get to yellow</a>
<script>
function scroll(){
var getMeTo = document.getElementById("yellow");
window.scrollTo({
top: getMeTo.scrollTop,
left: getMeTo.scrollLeft});
}
</script>
</body>
</html>
출력:
-method-with-scrollleft-and-scrolltop.webp)
메서드 사용
