특정 메뉴 클릭시 스크롤을 자동으로 내리는 방법 (html/javascript)

특정 메뉴 클릭시 스크롤을 특정위치로 스르륵~ 내리는 방법!

레이아웃이나 body 등에 아래와 같은 스크립트를 추가합니다.

<script>

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

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

event.preventDefault();

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

});

});

</script>

※주의※

jQuery를 불러오지 않았다면, 불러오세요~

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.min.js"></script>

자, 이제 클릭을 하는 부분에 다음과 같이 A 태그를 붙여주세요~

<a href="#target1" class="scroll">여기를 클릭하면 스크롤이 뙇!</a>

스크롤이 가야하는 대상 본문 html에 다음의 DIV를 붙여주세요~

<div id="target1"></div>

이제 A태그를 클릭하면 <div id="target1"></div> 가 있는 곳으로 자동으로 스크롤이 이동됩니다.

스크롤의 속도나 애니메이션 속도를 조정하고 싶으시면 위 Script 소스안에서 500 을 조정해주시면됩니다.

한번 어떻게 작동되는지 볼까요?

체험해보기 : http://www.saletire.net/