페이지 내 이동시 부드러운 스크롤 > 공책

본문 바로가기
010.6356.7610
  • design1001@naver.com
  • @design1001
작업물 전체보기

JQuery+JavaScript

JQuery+JavaScript 페이지 내 이동시 부드러운 스크롤

페이지 정보

  • 작성자후야
  • 조회 : 176
  • 작성일 : 2021-03-30 23:42

본문

페이지 내 이동시 부드러운 스크롤 


메뉴 클릭시 페이지 내 이동할 때 부드럽게 스크롤...


메뉴에는 각 단락의 클래스 네임으로 링크 지정 ex) .ex1, .ex2, .ex3...


offset값은 이동시 상단에 여백을 지정

  • code
  • source
  1. $('nav a').click(function(event) {

  2. 	var id = $(this).attr("href");

  3. 	var offset = 70;

  4. 	var target = $(id).offset().top - offset;

  5. 	$('html, body').animate({

  6. 		scrollTop: target

  7. 	}, 500);

  8. 	event.preventDefault();

  9. });

$('nav a').click(function(event) {
	var id = $(this).attr("href");
	var offset = 70;
	var target = $(id).offset().top - offset;
	$('html, body').animate({
		scrollTop: target
	}, 500);
	event.preventDefault();
});