具有反弹效果的 JQuery 锚滚动答案

【问题标题】：JQuery anchor scrolling with bounce effect具有反弹效果的 JQuery 锚滚动
【发布时间】：2014-12-10 19:32:56
【问题描述】：

我正在尝试弄清楚如何编写具有反弹效果的锚滚动。 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;
});

【问题讨论】：

标签： jquery scroll jquery-animate

【解决方案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;
});

【讨论】：

【解决方案2】：

看起来他们正在使用一个名为 jQuery Easing http://gsgd.co.uk/sandbox/jquery/easing/的插件

我认为您想要的缓动方法是“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>

【讨论】：