javascript
[Jquery] 메뉴 버튼 클릭 시 특정 위치로 스크롤 이동
- 2022.07.01 15:01:21
[!]HTML[/!]
<aside id="aside">
<ul class="vam"> <li class="active"><a href="#">menu1</a></li> <li><a href="#">menu2</a></li> <li><a href="#">menu3</a></li> </ul> </aside> <section class="_section">section1</section> <section class="_section">section2</section> <section class="_section">section3</section> [!]CSS[/!] #aside {position: fixed;top: 0;bottom: 100px;right: 30px;font-family: empty;font-size: 0;text-align: center;}
#aside:before {display: inline-block;vertical-align: middle;content: '';width: 0;height: 100%;} #aside .vam {display: inline-block;vertical-align: middle;} #aside ul > li a {display: block;margin: 10px 0;font-size: 16px;color: #000;} ._section {min-height: 500px;} ._section:nth-child(odd) {background: #f1f1f1;color: #000;} [!]Jquery[/!] //section target
section_target = { 'init' : function(){ this.action(); }, 'action' : function(){ //aside Active 처리 var win = $(window); var sec = $('._section'); var $aside = $('#aside'); var $asideSlide = '#aside ul > li a'; var ii = $('#aside li.active').index(); var asideActive = $('#aside li'); var wh = []; var secNum = 0; var spd = 600; sec.each(function(i){ wh[i] = sec.eq(i).offset().top; }); $(document).on('click',$asideSlide, function(e){ var i = $(this).parents('li').index(); var hh = $('#header').height(); var pos = $('._section').eq(i).offset().top - hh; e.preventDefault(); $('html,body').animate({ 'scrollTop' : pos },600,'easeInOutQuart'); return false; }); function acc(){ asideActive.eq(secNum).addClass('active').siblings().removeClass('active'); if(secNum==0){ $aside.addClass('home-on'); }else{ $aside.removeClass('home-on'); } } acc(); win.on({ 'load scroll resize' : function(){ var sh = parseInt($(this).scrollTop()); for (i=0;i<sec.length;i++){ if(sh >= parseInt(wh[i]) - (win.height()/2)){ secNum = i; acc(); } } } }); } } $(function(){ $(window).on({ 'load' : function(){ if($('._section').length>0){ section_target.init(); } } }); }) |