Written by Lee Jongseo
on April 22, 2021

scrollIntoView다루기

scrollIntoView

DOM요소.scrollIntoView(옵션)

DOM요소의 scrollIntoView를 호출하면 해당 요소로 스크롤이 이동한다.

EX) 클릭 시 맨 위로 올라가는 버튼을 만들기 (scroll to top)

const scrollToTop = document.querySelector('.scroll-to-top')
const topDiv = doucment.querySelector('.top-div')

scrollToTop.addEventListener('click', e => {
    topDiv.scrollIntoView({
        block: "start",
        behavior: "smooth"
    })
})

EX) 해당 화면으로 이동하는 nav bar 만들기

<nav>
    <ul class="navBar">
        <li class="nav-item">1</li>
        <li class="nav-item">2</li>
        <li class="nav-item">3</li>
    </ul>
</nav>
<div class="conatiner">
    <div class="conatiner-item">1</div>
    <div class="conatiner-item">2</div>
    <div class="conatiner-item">3</div>
</div>

const navItems = Array.from(document.querySelectorAll(".nav-item"))
const containerItems = Array.from(document.querySelectorAll(".container-item"))
const navBar = document.querySelector(".navBar")

navBar.addEventListener("click", e => {
    const targetItem = e.target
    if (targetItem.className === "nav-item") {
        const index = navItems.indexOf(targetItem)
        containerItems[index].scrollIntoView({
            block: "start",
            behavior: "smooth"
        })
    }
})

👈 👉 Top