원 페이지 내 페이지 이동 스크롤

원페이지로 작업하는 홈페이지에서 부드럽게 화면을 이동 할 수 있는 방법 Jquery와 id값을 이용한 방법

jQuery 소스

<script>

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

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

                event.preventDefault();

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

        });

});

</script>

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

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

500 은 스크롤 속도

html 소스

<ul>

<li><a href="#test01" class="scroll_move">test01</a></li>

<li><a href="#test02" class="scroll_move">test02</a></li>

<li><a href="#test03" class="scroll_move">test03</a></li>

<li><a href="#test04" class="scroll_move">test04</a></li>

<li><a href="#test05" class="scroll_move">test05</a></li>

</ul>

클래스명은 동일하게 주고 여러번을 주어도 해당 a 태그 해쉬값으로 이동하게 된다.

<section id="test01">

<div>내용</div>

</section>

<section id="test02">

<div>내용</div>

</section>

<section id="test03">

<div>내용</div>

</section>

<section id="test04">

<div>내용</div>

</section>

<section id="test05">

<div>내용</div>

</section>