페이지의 다른 부분으로 애니메이션 스윙

Question

스윙 애니메이션을 내 페이지의 특정 부분에 href으로 보내려고합니다. 그러나 내 HTML의 올바른 sections을 참조하기 위해 무엇을 넣어야할지 모르겠습니다. 내 a 태그가 참조하는 href id을 선택하는 것이 가장 좋습니다. 나는

jQuery를 새로운 접근

열어주는 말들 :

$("li a").each(function() { 
    $(this).on("click", function() { 
     var mode = "swing"; 
     $('html, body').animate({ 
      scrollTop: $(/*HERE*/).offset().top 
     }, 750, mode); 
    }); 
}) 

HTML :

<div class="container"> 
    <nav class="navbar navbar-default navbar-fixed-top"> 
    <ul id="nav_pills" class="nav nav-pills" role="tablist"> 
     <li role="presentation"> 
     <a href="#about">About</a> 
     </li> 
     <li role="presentation"> 
     <a id="test" href="#services">Services</a> 
     </li> 
     <li role="presentation"> 
     <a href="#portfolio">Portfolio</a> 
     </li> 
     <li role="presentation"> 
     <a href="#contact">Contact</a> 
     </li> 
    </ul> 
    </nav> 
</div> 

<!-- about --> 
<section id="about"> 
    <div class="border"> 
    ABOUT 
    </div> 
</section> 

<!-- services --> 
<section id="services"> 
    <div class="border"> 
    SERVICES 
    </div> 
</section> 

<!-- portfolio --> 
<section id="portfolio"> 
    <div class="border"> 
    PORTFOLIO 
    </div> 
</section> 

<!-- contact --> 
<section id="contact"> 
    <div class="border"> 
    CONTACT 
    </div> 
</section> 

Answer 1

근무 데모 : http://jsfiddle.net/p0tavns5/2/

$("li a").each(function() { // $('a[href^="#"]') might be a safer selector 
    $(this).on("click", function(e) { 
     var mode = "swing"; 
     e.preventDefault(); //stop the default jump to fragment 
     $('html, body').animate({ 
      scrollTop: $(this.hash).offset().top // .hash is the element's href 
     }, 750, mode); 
    }); 
}) 

출처 : http://www.paulund.co.uk/smooth-scroll-to-internal-links-with-jquery

,536,

이것은 또한 우아한 성능 저하의 이점이 있습니다. 실행되지 않으면 (noscript 또는 무언가), 정기적 인 조각 연결이 기본값이됩니다.