바운스 효과가있는 JQuery 앵커 스크롤

Question

바운스 효과가있는 앵커 스크롤을 작성하는 방법을 알아 내려고합니다. www.antecmotive.com 해당 사이트의 예제에서 상단 탐색을 클릭하면 해당 섹션으로 스크롤되지만 섹션 위로 조금 스크롤 한 다음 올바른 위치로 다시 이동하는 것을 볼 수 있습니다.

정상적인 스크롤을위한 코드는 다음과 같습니다.

var $root = $('html, body'); 
$('#nav a').click(function() { 
    var href = $.attr(this, 'href'); 
    $root.animate({ 
     scrollTop: $(href).offset().top 
    }, 500, function() { 
     window.location.hash = href; 
    }); 
    return false; 
}); 

Answer 1

당신은 체인 애니메이션은 당신이 원하는 것을 달성 할 수 http://jsfiddle.net/ry1gvd03/

$('#nav a').click(function(e) { 
    e.preventDefault(); 

    var ctrl = $($.attr(this, 'href')); 

    $root.animate({ 
     scrollTop: $(ctrl).offset().top + 50 
    }, 500, function() { 

     $root.animate({ 
      scrollTop: $(ctrl).offset().top 
     }, 500); 
    }); 
    return false; 
}); 

Answer 2

가

http://gsgd.co.uk/sandbox/jquery/easing/ 내가 원하는 완화 방법은 "생각 완화 jQuery를라는 플러그인을 사용하는 것 같습니다 easeOutBack "입니다. 제가

here

$(".scroll").click(function(event) { 
 
    event.preventDefault(); 
 

 
    var dest = 0; 
 
    var $target = $(this.hash); 
 
    var targetTop = $target.offset().top; 
 
    var remainTop = $(document).height() - $(window).height(); 
 

 
    if (targetTop > remainTop) { 
 
    dest = remainTop; 
 
    } else { 
 
    dest = targetTop; 
 
    } 
 
    console.log(dest); 
 
    var dur = dest; 
 

 
    $('html,body').animate({ 
 
    scrollTop: dest 
 
    }, dur, 'easeOutBack'); 
 

 
});

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="//gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script> 
 
<nav> 
 
    <a class="scroll" href="#destination1">Destination 1</a> 
 
    <a class="scroll" href="#destination2">Destination 2</a> 
 
    <a class="scroll" href="#destination3">Destination 3</a> 
 
    <a class="scroll" href="#destination4">Destination 4</a> 
 
</nav> 
 

 

 
<section id="destination1"> 
 
    <h1>Block 1</h1> 
 
    <p> 
 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor 
 
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
 
    </p> 
 
</section> 
 

 
<section id="destination2"> 
 
    <h1>Block 2</h1> 
 
    <p> 
 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor 
 
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
 
    </p> 
 
</section> 
 

 
<section id="destination3"> 
 
    <h1>Block 3</h1> 
 
    <p> 
 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor 
 
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
 
    </p> 
 
</section> 
 

 
<section id="destination4" style="padding-bottom: 100px;"> 
 
    <h1>Block 4</h1> 
 
    <p> 
 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor 
 
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
 
    </p> 
 
</section>

에서 변형 예