window.scrollTo({ }) : window 객체의 scrollTo, scrollBy 메서드를 사용하여 특정 엘리먼트가 아닌 위치를 기준으로 이동시킨다. window.scrollTo(X, Y) 는 왼쪽 상단을 기준(절대위치)으로 하여 스크롤을 이동시키며, window.scrollBy
btnLink[1].addEventListener("click", function(e){//a태그로 이동하는데 특정 영역으로 이동시키는걸 막기 위해서 하나를 선언
e.preventDefault();
window.scrollTo({top: 1000, behavior:"smooth"});//행동을 부드럽게 한다는 의미
})
</script>
selectAll로 다같이 잡아주고 변수로 선언해준다. 그리고 두번째에 해당하는 버튼에 적용되도록 [1]로 인덱스 번호를 지정하여서 클릭되는 개별의 변수에게 e 라고 선언을 해주고 e에게 스크롤을 지정해준다. top으로 스크롤 위치를 지정해주고 행동을 부드럽게 설정해주면 해당 버튼을 누르게 되면 해당 스크롤로 부드럽게 움직이게 된다.
Event.preventDefault() 는 a 태그나 submit 태그는 누르게 되면 href 를 통해 이동하거나 , 창이 새로고침하여 실행됩니다.
preventDefault 를 통해 이러한 동작을 막아줄 수 있다. 그렇기 때문에 이를 지정해야 새로운 창이 열리지 않고 부드럽게 움직이게 되는것이다. 그렇기 때문에 꼭 넣어주어야 한다.
<script>
letbtnLink=document.querySelectorAll(".link");
console.log(btnLink);
btnLink[0].addEventListener("click", function(e){
e.preventDefault();
window.scrollTo({top:0, behavior:"smooth"});
})
btnLink[1].addEventListener("click", function(e){//a태그로 이동하는데 특정 영역으로 이동시키는걸 막기 위해서 하나를 선언
e.preventDefault();
window.scrollTo({top:1000, behavior:"smooth"});//행동을 부드럽게 한다는 의미
})
btnLink[2].addEventListener("click", function(e){
e.preventDefault();
window.scrollTo({top:2000, behavior:"smooth"});
})
btnLink[3].addEventListener("click", function(e){
e.preventDefault();
window.scrollTo({top:3000, behavior:"smooth"});
})
</script>
각각의 스크롤의 좌표를 지정하여 버튼마다 지정하여 넣어주면 해당 위치로 이동하게 된다.
letbtnLink=document.querySelectorAll(".link");
btnLink.forEach(function(link){
link.addEventListener("click", function(e){
e.preventDefault();
window.scrollTo({top: , behavior:"smooth"});
});
});
forEach를 사용해서 적용할 수도 있는데 여기서는 연산식을 넣어주어야 한다. 이전의 식에서 1000씩 값이 올라갔었는데 식으로 풀게 되면 1000에 인덱스번호의 숫자만큼 곱해주는것이 된다. 이를 산술연산자로 풀게 되면
이런식으로 된다 즉 인덱스 번호를 선언하고 top값에 1000*idx(인덱스 번호)를 넣어 계산식이 적용되도록 하면 자동으로 지정되거 이동되는것을 확인할 수 있다.
이전에는 값을 1000px로 지정하였는데 이번에는 자동으로 높이값을 파악하여 넣도록 단위를 vh로 바꾸어주고 자바에도 이를 적용하도록 하여 스크립트를 수정하지 않도록 하고 싶다.
<script>
letbtnLink=document.querySelectorAll(".link");
letsecH=document.querySelector("#section1").offsetHeight; //sec1의 높이값을 찾아서 secH에 저장하라는 명령어
console.log(secH)
자동으로 높이값을 찾아 계산해 변수에 넣어주고 해당값을 top에 넣어서 값이 계산되도록 한다.
<script>
letbtnLink=document.querySelectorAll(".link");
letsecH=document.querySelector("#section1").offsetHeight; //sec1의 높이값을 찾아서 secH에 저장하라는 명령어
