JS. 클릭으로 이동할 때 스크롤을 부드럽게!

개요

<a href="#sample1">01. 자바스크립트</a>

a 태그를 선택하면, href에 지정한 곳으로 갈 수 있다

id = "sample1"으로 지정한 곳으로 이동한다

하지만, 자연스럽지 않다

 

그래서 scrollIntroView를 이용해 자연스럽게 스크롤이 되도록 해줄 수 있다

방법

1. querySelectorAll로 <a href=#으로 시작하는 모든 것을 선택해준다

//#id 이동하기
document.querySelectorAll("a[href^='#']")

 

2. 근데 모든 것을 한 번에 선택하면 각각 적용이 어려우므로, 각각 적용해주는 forEach를 적용한다

//#id 이동하기
document.querySelectorAll("a[href^='#']").forEach

 

3. 각각을  클릭했을 때 어떤 이벤트를 넣어준다

//#id 이동하기
document.querySelectorAll("a[href^='#']").forEach(el => {
    el.addEventListener("click")
})

 

4. 클릭했을 때 바로 이동하는 것을 멈추게 하자! (왜냐면 우린 스크롤을 넣어줄거기 때문이다)

그러니까 바로 이동 -> 스크롤 이동 으로 바꿔주기보단,

바로 이동을 취소해주고, 스크롤 이동을 설정해줘야한다는 것이다!

출처 : https://programming119.tistory.com/100

여기서 사용되는 개념이 preventDefault이다.

 

preventDefault란, 어떤 이벤트를 명시적으로 처리하지 않은 경우, 해당 이벤트에 대한 사용자 에이전트의 기본 동작을 실행하지 않도록 지정한다고 mdn에 나와 있으며, 위의 출처에 조금 더 알기 쉽게 설명이 있다.

//#id 이동하기
document.querySelectorAll("a[href^='#']").forEach(el => {
    el.addEventListener("click", (event) => {
    event.preventDefault();
    })
})

 

5. getAttribute를 사용해서 속성 값을 가져오자

getAttribute는 선택한 요소의 특정 속성을 가져오는 역할을 한다.

//#id 이동하기
document.querySelectorAll("a[href^='#']").forEach(el => {
    el.addEventListener("click", (event) => {
    event.preventDefault();
    document.querySelector(el.getAttribute("href"))
    })
})

 

6. scrollIntoview에 스무스한 행동을 추가해 준다

//#id 이동하기
document.querySelectorAll("a[href^='#']").forEach(el => {
    el.addEventListener("click", (event) => {
    event.preventDefault();
    document.querySelector(el.getAttribute("href")).scrollIntoview({
        behavior: "smooth"
        })
    })
})

 

7. 끝!

scrollIntoView의 단점으로는 behavior이 smooth밖에 없는 것이다

잘 다듬어 준다면 더욱 괜찮은 property가 될 것 같다!