JS/jQuery - a태그(anchor) 버튼 클릭시 해당 아이디로 스크롤 부드럽게 이동하기

닌니디자인 JS 썸네일

스크롤 부드럽게 이동

웹페이지 디자인중에는 a태그 href링크에 해시태그(#)를 넣어 페이지를 스크롤 하는 방식이 있다. 스크립트 없이 사용하면 애니메이션 효과 없이 한번에 이동한다. 스크립트를 이용하면 스크롤을 부드럽게 이동하는 애니메이션 효과를 적용할 수 있다.

<div class="btns">
    <a href="#anchor1"></a>
    <a href="#anchor2"></a>
    <a href="#anchor3"></a>
    <a href="#anchor4"></a>
</div>
 
<div id="anchor1">1페이지</div>
<div id="anchor2">2페이지</div>
<div id="anchor3">3페이지</div>
<div id="anchor4">4페이지</div>

 

 

 

---

 

바닐라스크립트

 

 

 

---

 

제이쿼리