[html,jQuery] 클릭 시 해당 엘리먼트로 스크롤 이동

java script(jQuery)

$(document).ready(function($) {

        $(".scroll_move").click(function(event){         

                event.preventDefault();

                $('html,body').animate({scrollTop:$(this.hash).offset().top}, 500);

        });

});

// 클래스가 scroll_move인 a 태그를 눌렀을때 발생되게 하는 이벤트

// $(this.hash) a태그에 있는 해쉬 값으로 스크롤링 되며 이동

// 500 은 스크롤 속도

html 소스

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

<div class="scroll-moveBox flex flex-br-c">
  <ul>
    <li><a href="#div1" id="scroll_move">div1로 이동</a></li>
    <li><a href="#div2" id="scroll_move">div2로 이동</a></li>
    <li><a href="#div3" id="scroll_move">div3로 이동</a></li>
    <li><a href="#div4" id="scroll_move">div4로 이동</a></li>
  </ul>
</div>


<div id="div1">div1</div>


<div id="div2">div2</div>


<div id="div3">div3</div>


<div id="div4">div4</div>