부드러운 링크 이동하는 방법

제가 이때까지 사용하는 방법중에서 가장 편하고 맘에 드는 방법입니다.
이전에는 떠블클릭하면 상하단으로 이동하는 방법과 , 스크롤을 밑으로 하면 위로 올라가는 버튼이 생성된다든가 하는 여러가지 방법이 있습니다.
먼저 아래의 링크를 참고하시기 바랍니다.

관련글

스크롤하면 상단으로 올라갈수 있는 버튼 => http://demun.tistory.com/1975

블로그 상하단 이동하기(anchor,앵커) => http://demun.tistory.com/1706

상.하단 부드럽게 이동하기 => http://demun.tistory.com/1695

위로 이동버튼 간단하게 삽입하기 => http://demun.tistory.com/1664

이 방법은 jQuery  를 사용하는 방법으로 코드가 비교적 간단하고 또 다른 링크를 만들어도 사용할 수 있다는 점입니다. 즉 확장성이 있다는 말이죠.

먼저 제가 현재 적용한 블로그에서 링크를 보고 결과를 알려드리겠습니다.
동영상을 보면 대략 어떤식으로 움직이는 알 수 있을겁니다. 
아래 동영상은 링크를 클릭하면 원해 댓글로 이동하는 것이나, 현재의 글에 댓글이 없어서 중간에 멈춤니다. 여하튼 움직이는 모습만 참고하시기 바랍니다.

사용방법을 알려드리겠습니다.
먼저 html  코드는 아래처럼 비교적 간단합니다. 바로 네임스페이스를 이용하는 방법인데요. 

<!-- 출발지 -->
<a href="#footer" id="aTop" title="아래로 이동">아래로 이동</a>

이렇게 출발하는 즉 클릭하는 곳은 a 링크를 이용합니다. 참고할 부분은 id 를 지정했다는 점입니다. 참고하세요.
이동하는 곳은 href 로 지정을 하는데요. 바로 아래에 잇는 <div id="footer"> 로 이동을 합니다.
마찬가지로 아래에서는 위로 이동버튼을 만들면 되겠지요. 대략 모습은 아래와 같겠지요.

<!-- 아래에서 작성할 경우 위쪽인 header 로 이동 -->
<a href="#header" id="aBot" title="위로 이동">위로 이동</a>

이런식으로 작성하면 됩니다. 그럼 jQuery 코드를 html 편집창에서 작성합니다.

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		// smooth scroll
		$('#aTop,#aBot').click(function(event) { //#aTop,#aBot 를 지정함
			var id = $(this).attr("href");
			var offset = 60;
			var target = $(id).offset().top - offset;
			$('html, body').animate({scrollTop:target}, 500);
			event.preventDefault();
		});
	});
</script>

이것으로 사용준비는 모두 끝이 났습니다. 좀더 다듬으로 저처럼 이미지로 텍스트를 대신해서 보기좋게 꾸밀수도 있습니다.
위의 링크를 클릭하면 부드럽게 원하는 목적지까지 움직이는 것을 알 수 있습니다.