-
같은 페이지내 링크이동시 부드럽게 스크롤 하기 - jQuery웹프로그래밍/자바스크립트 2011. 2. 1. 09:16반응형
같은 페이지 내에서 링크이동시 부드럽게 스크롤되는 jQuery 소스.
$("html,body").animate({
scrollTop: $("#target").offset().top //id가 target 인 일레먼트의 상단위치로 페이지 스크롤
}, 500); //이동속도 500밀리초(1초는 1000밀리초)
=== 아래내용은 구버전 소스 입니다. ==================================
[<head></head>태그 사이에 다음 소스 삽입]
1. jQuery 주소삽입.(jQuery 호스팅 주소 참조 : http://horangi.tistory.com/254)
2. 스크롤 소스 삽입.
<script type="text/javascript">
/*******
*** Anchor Slider by Cedric Dugas ***
*** Http://www.position-absolute.com ***
Never have an anchor jumping your content, slide it.
Don't forget to put an id to your anchor !
You can use and modify this script for any project you want, but please leave this comment as credit.
*****/
$(document).ready(function() {
$("a.anchorLink").anchorAnimate()
});
jQuery.fn.anchorAnimate = function(settings) {
settings = jQuery.extend({
speed : 1100
}, settings);
return this.each(function(){
var caller = this
$(caller).click(function (event) {
event.preventDefault()
var locationHref = window.location.href
var elementClick = $(caller).attr("href")
var destination = $(elementClick).offset().top;
$("html:not(:animated),body:not(:animated)").animate({ scrollTop: destination}, settings.speed, function() {
window.location.hash = elementClick
});
return false;
})
})
}
</script>
[본문 <body></body> 사이]
3. 본문의 링크될 책갈피에 "id" 지정.
<a name="doc" id="doc"></a>
4. 본문의 링크부분에 클래스 지정
<a href="#doc" class="anchorLink">본문</a> 반응형'웹프로그래밍 > 자바스크립트' 카테고리의 다른 글
특정 PC에서의 인터넷익스플로러 에서 액세스 거부 해결!!! (0) 2013.08.29 j쿼리 _ ajax 읽어오기 (0) 2013.07.29 jQuery 호스팅 주소 - 구글, MS, jQuery (0) 2011.01.16 마우스 현재위치 확인 (0) 2010.12.20 DIV 또는 이미지를 마우스로 끌어서 움직이기 (0) 2010.12.13