[HTML] a tag href="#" 아이디로 부드럽게 스크롤 하기,scroll-behavior

div에 아이디를 잡아놓고 nav a tag에 href="#id"로 주었다.

 

HTML

<a href="#service">서비스</a>

<div id="#service">
	...
</div>

여기서 스크롤을 부드럽게 하려면 js가 필요할 줄 알았는데 그렇지 않았다.

 

CSS

html{
	scroll-behavior: smooth;
}

위 처럼 html태그에 전체적으로 scroll-behavior: smooth; 로 주면 된다.

 

 

 

 

 

---

하지만 JS로 구성할 수도 있다.

function onLinkClick() {
  document.getElementsByTagName('h2')[3].scrollIntoView();
}

와 같이 사용할 수 있나보다.

 

또는 

$('.smooth-goto').on('click', function() {  
    $('html, body').animate({scrollTop: $(this.hash).offset().top - 50}, 1000);
    return false;
});

등과 같이 사용 할 수 있다.