?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄

document의 anchor이동을 Smooth하게 Scroll해주는 jQuery의 Animate() function 사용법

이렇게 쓸려니 등싱같네염


Smooth Scrolling Internal Anchor Links

많은곳에서 통용되고 있는 a href="#ID" 부분을 허세허세 스뭇th하게 이동시키기위해 고안된 방법을 소개한다. 물론 제이쿼리 필요.


<a href="#comments" class="scroll">Scroll</a>


아래 소스와 함께라면 앵커태그 class에 scroll을 추가하면 된다.

jQuery(document).ready(function($) {
 
	$(".scroll").click(function(event){		
		event.preventDefault();
		$('html,body').animate({scrollTop:$(this.hash).offset().top}, 500);
	});
});

참 쉽죠? name으로 때려박았다면 아래를 참조.

$('html,body').animate({scrollTop:$('[name="'+this.hash.substring(1)+'"]').offset().top}, 500);
TAG •

List of Articles
번호 분류 제목 글쓴이 날짜 조회 수
61 Zabbix Zabbix 아이템의 패시브와 액티브의 이해 JONG 2017.03.22 2157
60 Zabbix Zabbix 3.0에서 3.2로 업데이트하기 JONG 2016.10.03 2927
59 XpressEngine Rhymix에서 설치 화면이 나오지 않을 때 (CentOS7) 1 JONG 2016.03.25 3527
58 Zabbix CentOS7에 Zabbix 3.0.1 설치하기 JONG 2016.03.12 7452
57 Zabbix Zabbix의 각 프로세스가 하는 일 file JONG 2016.03.10 6581
56 Web 윈10에서 spartan이 localhost를 씹을때 JONG 2015.06.04 3862
55 Web animate의 속도를 빠르게 해주시는 Velocity.js 소개 1 file JONG 2014.08.27 7713
54 Web jQuery를 이용한 테이블 셀병합 JONG 2013.11.01 18369
53 XpressEngine XE 1.5.4.2 BlogAPI 안되는거 수정하는 코드 2 JONG 2013.10.29 7800
52 Web Youtube 동영상 자동재생으로 퍼담기 & 파라메터 JONG 2013.03.19 11621
51 XpressEngine XE 1.5.4.2 추천 & 비추천 기능을 비회원도 사용가능하게 하기 1 file JONG 2013.03.06 10726
» Web 문서의 앵커 이동을 Smooth하게 스크롤 해주는 jQuery의 animate함수 사용법 JONG 2012.12.26 18547
49 Web Google Maps API v3에서 기본 infowindow 정보 없애기 (poi) JONG 2012.12.26 11119
48 Web 셀렉트 태그 관련 jQuery코드 정리 1 JONG 2012.11.17 10194
47 Web 화면 최상단으로 움직이는 JS 소스 JONG 2012.10.15 10410
46 XpressEngine XE 모바일에서 유투브 동영상크기 고정하기 3 JONG 2012.09.07 10745
45 Web jQuery와 다른 라이브러리 (prototype 등) 를 함께 쓰는 방법 file JONG 2012.09.02 9712
44 Database MSSQL 스키마 비교 프로그램 Open DBDiff file JONG 2012.08.15 15148
43 XpressEngine Social XE 로그인을 모바일 레이아웃에 추가 file JONG 2012.08.15 9989
42 Web .htaccess 작성을 통한 이미지 펌 방지 file JONG 2012.05.04 13010
Board Pagination Prev 1 2 3 4 Next
/ 4