element.scrollIntoView();

summer_joy·2022년 10월 14일
0
	<ul class="menu">
        <li data-link="#section1">menu1</li>
        <li data-link="#section2">menu2</li>
        <li data-link="#section3">menu3</li>
        <li data-link="#section4">menu4</li>
    </ul>
    <div class="container">
        <div id="section1" class="content"></div>
        <div id="section2" class="content"></div>
        <div id="section3" class="content"></div>
        <div id="section4" class="content"></div>
    </div>
		document.querySelector('.menu').addEventListener('click', e => {
            if(e.target.nodeName === 'LI') {
                let id_value = e.target.dataset.link;
                document.querySelector(id_value).scrollIntoView({behavior : 'smooth'});
            }
        });

괄호안에 {behavior : 'smooth'} 코드 추가시
스크롤 이동이 ease-in-out과 같이 부드러워진다

profile
💻 Hello world

0개의 댓글