Html＆JQuery 페이지 내 이동시 부드러운 스크롤
페이지 정보
작성자 디자인천일
작성일Date: 2025-03-29 00:58
조회view: 12
본문
페이지 내 이동시 부드러운 스크롤
메뉴 클릭시 페이지 내 이동할 때 부드럽게 스크롤...
메뉴에는 각 단락의 클래스 네임으로 링크 지정 ex) .ex1, .ex2, .ex3...
offset값은 이동시 상단에 여백을 지정
html
<ul class="tab_tit">
<li><a href=".tab1" class="active">상품 설명</a></li>
<li><a href=".tab2">상품 리뷰</a></li>
<li><a href=".tab3">상품 정보</a></li>
</ul>
<div class="smp_cont tab1">
<h3>상품설명</h3>
<p>...</p>
</div>
<div class="smp_cont tab2">
<h3>상품리뷰</h3>
<p>...</p>
</div>
<div class="smp_cont tab3">
<h3>상품정보</h3>
<p>...</p>
</div>jQuery/Javascript
$('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();
});