skill/HTML.Javscript.CSS

[javacirpt] jquery 스크롤 자동 이동 + 부드럽게 이동

have a nice day :D 2021. 5. 12. 09:00
반응형
jquery 스크롤 자동 이동 (바로)
$(document).ready(function(){
	const offset = $("#target").offset();
	$('html, body').animate({scrollTop: offset.top}, 0);
});

- 이동하고 싶은 엘리먼트에 id 선언,

- 위 처럼 id='target'으로 설정 또는 #target 정보에 선언된 ID로 변경,

- class, element name 상관 없음.

 

jquery 스크롤 자동 이동 (부드럽게)
$(document).ready(function(){
	const offset = $("#target").offset();
	$('html, body').animate({scrollTop: offset.top}, 500);
});

- animate 뒤의 인자에 숫자를 입력하면 숫자가 클 수록 천천히 이동.

 

offset() 살펴보기
$('#target').offset()
{top: 366.5, left: 0}

- offset() 에는 top, left가 있다.

반응형