<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과 같이 부드러워진다