탭메뉴 링크 클릭시 화면 스크롤 부드럽게 처리 > JQuery & JavaScript

STUDY ROOM

JQuery & JavaScript

탭메뉴 링크 클릭시 화면 스크롤 부드럽게 처리

페이지 정보

작성자 JMStudy 작성일17-09-08 17:25 조회6,062회 댓글0건

본문

$('.pg-anc a').on('click', function(e) {

//e.stopPropagation();

var scrollTopSpace;

if (window.innerWidth >= 1100) {

scrollTopSpace = 70;

} else {

scrollTopSpace = 70;

}

var tabLink = $(this).attr('href');

var offset = $(tabLink).offset().top;

$('html, body').animate({scrollTop : offset - scrollTopSpace}, 500);

return false;

});

 

<div id="anc_1">

<div class="pg-anc">

    <ul class="tabs">

   <li><a href="#anc_1" class="active">탭메뉴1</a></li>

   <li><a href="#anc_2">탭​메뉴2</a></li>

   <li><a href="#anc_3">탭​메뉴3</a></li>

   </ul>

</div>

<div>내용1</div>

</div>​

<div id="anc_2">

<div class="pg-anc">

    <ul class="tabs">

    <li><a href="#anc_1">탭​메뉴1</a></li>

    <li><a href="#anc_2" class="active">탭​메뉴2</a></li>

    <li><a href="#anc_3">탭​메뉴3</a></li>

   </ul>

</div>

<div>내용2</div>

</div>​​ 

<div id="anc_3">

<div class="pg-anc">

    <ul class="tabs">

    <li><a href="#anc_1">탭​메뉴1</a></li>

    <li><a href="#anc_2">탭​메뉴2</a></li>

    <li><a href="#anc_3" class="active">탭​메뉴3</a></li>

   </ul>

</div>

<div>내용3</div>

</div>​​ 

 

댓글목록

등록된 댓글이 없습니다.