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

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

的插件

我认为你想要的缓和方法是＆＃34; easeOutBack＆＃34;。我修改了here

中的示例

＆＃13;

 $(".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');

 });

＆＃13;

<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>

＆＃13;

JQuery锚点滚动与弹跳效果

2 个答案: