javascript - jQuery 平滑滚动以固定菜单 anchor 仅在页面顶部时有效

Question

我正在尝试创建一个简单的单页导航器，它有一个固定的菜单，可以顺畅地滚动到我在页面上定义的 anchor 。

我的问题是它只有在页面滚动到最顶部时才能正确滚动。如果我先单击一个菜单项，然后单击另一个菜单项，它将滚动到页面上似乎非常随机的位置。

只有在使用平滑滚动的 jQuery 脚本时才会发生这种情况。删除脚本将导致正确的 anchor 链接行为，但不幸的是没有可爱、流畅的滚动:(

我做了一个fiddle为了说明这一点，还有一个小的 video .

$(document).ready(function () {
$('a[href^="#"]').on('click',function (e) {
    e.preventDefault();

    var target = this.hash;
    var $target = $(target);

    $('html, body').stop().animate({
        'scrollTop': $target.offset().top - 50
    }, 900, 'swing', function () {
        window.location.hash = target;
    });
  });
});

Answer 1

与其使用 a 标签作为书签，不如使用 div 标签并将部分的所有相应内容包装在其中，block-element 在这种情况。

// Smooth scroll to anchor-links
$(document).ready(function() {
  $('a[href^="#"]').on('click', function(e) {
    e.preventDefault();

    var target = this.hash;
    var $target = $(target);

    $('html, body').animate({
      scrollTop: $target.offset().top - 50
    }, 900, 'swing', function() {
      window.location.hash = target;
    });
  });
});

.menu-fixed {
  width: 100%;
  height: 50px;
  background-color: red;
  color: #fff;
  position: fixed;
  top: 0px;
  left: 0px;
  margin: auto;
  text-align: center;
}
.menu-fixed a {
  width: 20%;
  display: inline-block;
  line-height: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="menu-fixed">
  <a href="#link1">Link 1</a>
  <a href="#link2">Link 2</a>
  <a href="#link3">Link 3</a>
  <a href="#link4">Link 4</a>
</div>

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porta pellentesque velit. Donec mattis lacus in nisl volutpat dapibus. Nulla viverra diam nisl, non scelerisque ligula pretium id. Suspendisse erat tortor, tincidunt nec volutpat et, efficitur
  id tellus. Quisque congue efficitur imperdiet. Vestibulum nec commodo arcu. Curabitur cursus enim ut dapibus elementum.
</p>
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porta pellentesque velit. Donec mattis lacus in nisl volutpat dapibus. Nulla viverra diam nisl, non scelerisque ligula pretium id. Suspendisse erat tortor, tincidunt nec volutpat et, efficitur
  id tellus. Quisque congue efficitur imperdiet. Vestibulum nec commodo arcu. Curabitur cursus enim ut dapibus elementum.
</p>
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porta pellentesque velit. Donec mattis lacus in nisl volutpat dapibus. Nulla viverra diam nisl, non scelerisque ligula pretium id. Suspendisse erat tortor, tincidunt nec volutpat et, efficitur
  id tellus. Quisque congue efficitur imperdiet. Vestibulum nec commodo arcu. Curabitur cursus enim ut dapibus elementum.
</p>
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porta pellentesque velit. Donec mattis lacus in nisl volutpat dapibus. Nulla viverra diam nisl, non scelerisque ligula pretium id. Suspendisse erat tortor, tincidunt nec volutpat et, efficitur
  id tellus. Quisque congue efficitur imperdiet. Vestibulum nec commodo arcu. Curabitur cursus enim ut dapibus elementum.
</p>
<div id="link1">
  <h1>Link 1</h1>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porta pellentesque velit. Donec mattis lacus in nisl volutpat dapibus. Nulla viverra diam nisl, non scelerisque ligula pretium id. Suspendisse erat tortor, tincidunt nec volutpat et, efficitur
    id tellus. Quisque congue efficitur imperdiet. Vestibulum nec commodo arcu. Curabitur cursus enim ut dapibus elementum.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porta pellentesque velit. Donec mattis lacus in nisl volutpat dapibus. Nulla viverra diam nisl, non scelerisque ligula pretium id. Suspendisse erat tortor, tincidunt nec volutpat et, efficitur
    id tellus. Quisque congue efficitur imperdiet. Vestibulum nec commodo arcu. Curabitur cursus enim ut dapibus elementum.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porta pellentesque velit. Donec mattis lacus in nisl volutpat dapibus. Nulla viverra diam nisl, non scelerisque ligula pretium id. Suspendisse erat tortor, tincidunt nec volutpat et, efficitur
    id tellus. Quisque congue efficitur imperdiet. Vestibulum nec commodo arcu. Curabitur cursus enim ut dapibus elementum.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porta pellentesque velit. Donec mattis lacus in nisl volutpat dapibus. Nulla viverra diam nisl, non scelerisque ligula pretium id. Suspendisse erat tortor, tincidunt nec volutpat et, efficitur
    id tellus. Quisque congue efficitur imperdiet. Vestibulum nec commodo arcu. Curabitur cursus enim ut dapibus elementum.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porta pellentesque velit. Donec mattis lacus in nisl volutpat dapibus. Nulla viverra diam nisl, non scelerisque ligula pretium id. Suspendisse erat tortor, tincidunt nec volutpat et, efficitur
    id tellus. Quisque congue efficitur imperdiet. Vestibulum nec commodo arcu. Curabitur cursus enim ut dapibus elementum.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porta pellentesque velit. Donec mattis lacus in nisl volutpat dapibus. Nulla viverra diam nisl, non scelerisque ligula pretium id. Suspendisse erat tortor, tincidunt nec volutpat et, efficitur
    id tellus. Quisque congue efficitur imperdiet. Vestibulum nec commodo arcu. Curabitur cursus enim ut dapibus elementum.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porta pellentesque velit. Donec mattis lacus in nisl volutpat dapibus. Nulla viverra diam nisl, non scelerisque ligula pretium id. Suspendisse erat tortor, tincidunt nec volutpat et, efficitur
    id tellus. Quisque congue efficitur imperdiet. Vestibulum nec commodo arcu. Curabitur cursus enim ut dapibus elementum.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porta pellentesque velit. Donec mattis lacus in nisl volutpat dapibus. Nulla viverra diam nisl, non scelerisque ligula pretium id. Suspendisse erat tortor, tincidunt nec volutpat et, efficitur
    id tellus. Quisque congue efficitur imperdiet. Vestibulum nec commodo arcu. Curabitur cursus enim ut dapibus elementum.
  </p>

</div>
<div id="link2">
  <h1>Link 2</h1>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porta pellentesque velit. Donec mattis lacus in nisl volutpat dapibus. Nulla viverra diam nisl, non scelerisque ligula pretium id. Suspendisse erat tortor, tincidunt nec volutpat et, efficitur
    id tellus. Quisque congue efficitur imperdiet. Vestibulum nec commodo arcu. Curabitur cursus enim ut dapibus elementum.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porta pellentesque velit. Donec mattis lacus in nisl volutpat dapibus. Nulla viverra diam nisl, non scelerisque ligula pretium id. Suspendisse erat tortor, tincidunt nec volutpat et, efficitur
    id tellus. Quisque congue efficitur imperdiet. Vestibulum nec commodo arcu. Curabitur cursus enim ut dapibus elementum.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porta pellentesque velit. Donec mattis lacus in nisl volutpat dapibus. Nulla viverra diam nisl, non scelerisque ligula pretium id. Suspendisse erat tortor, tincidunt nec volutpat et, efficitur
    id tellus. Quisque congue efficitur imperdiet. Vestibulum nec commodo arcu. Curabitur cursus enim ut dapibus elementum.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porta pellentesque velit. Donec mattis lacus in nisl volutpat dapibus. Nulla viverra diam nisl, non scelerisque ligula pretium id. Suspendisse erat tortor, tincidunt nec volutpat et, efficitur
    id tellus. Quisque congue efficitur imperdiet. Vestibulum nec commodo arcu. Curabitur cursus enim ut dapibus elementum.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porta pellentesque velit. Donec mattis lacus in nisl volutpat dapibus. Nulla viverra diam nisl, non scelerisque ligula pretium id. Suspendisse erat tortor, tincidunt nec volutpat et, efficitur
    id tellus. Quisque congue efficitur imperdiet. Vestibulum nec commodo arcu. Curabitur cursus enim ut dapibus elementum.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porta pellentesque velit. Donec mattis lacus in nisl volutpat dapibus. Nulla viverra diam nisl, non scelerisque ligula pretium id. Suspendisse erat tortor, tincidunt nec volutpat et, efficitur
    id tellus. Quisque congue efficitur imperdiet. Vestibulum nec commodo arcu. Curabitur cursus enim ut dapibus elementum.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porta pellentesque velit. Donec mattis lacus in nisl volutpat dapibus. Nulla viverra diam nisl, non scelerisque ligula pretium id. Suspendisse erat tortor, tincidunt nec volutpat et, efficitur
    id tellus. Quisque congue efficitur imperdiet. Vestibulum nec commodo arcu. Curabitur cursus enim ut dapibus elementum.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porta pellentesque velit. Donec mattis lacus in nisl volutpat dapibus. Nulla viverra diam nisl, non scelerisque ligula pretium id. Suspendisse erat tortor, tincidunt nec volutpat et, efficitur
    id tellus. Quisque congue efficitur imperdiet. Vestibulum nec commodo arcu. Curabitur cursus enim ut dapibus elementum.
  </p>

</div>
<div id="link3">
  <h1>Link 3</h1>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porta pellentesque velit. Donec mattis lacus in nisl volutpat dapibus. Nulla viverra diam nisl, non scelerisque ligula pretium id. Suspendisse erat tortor, tincidunt nec volutpat et, efficitur
    id tellus. Quisque congue efficitur imperdiet. Vestibulum nec commodo arcu. Curabitur cursus enim ut dapibus elementum.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porta pellentesque velit. Donec mattis lacus in nisl volutpat dapibus. Nulla viverra diam nisl, non scelerisque ligula pretium id. Suspendisse erat tortor, tincidunt nec volutpat et, efficitur
    id tellus. Quisque congue efficitur imperdiet. Vestibulum nec commodo arcu. Curabitur cursus enim ut dapibus elementum.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porta pellentesque velit. Donec mattis lacus in nisl volutpat dapibus. Nulla viverra diam nisl, non scelerisque ligula pretium id. Suspendisse erat tortor, tincidunt nec volutpat et, efficitur
    id tellus. Quisque congue efficitur imperdiet. Vestibulum nec commodo arcu. Curabitur cursus enim ut dapibus elementum.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porta pellentesque velit. Donec mattis lacus in nisl volutpat dapibus. Nulla viverra diam nisl, non scelerisque ligula pretium id. Suspendisse erat tortor, tincidunt nec volutpat et, efficitur
    id tellus. Quisque congue efficitur imperdiet. Vestibulum nec commodo arcu. Curabitur cursus enim ut dapibus elementum.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porta pellentesque velit. Donec mattis lacus in nisl volutpat dapibus. Nulla viverra diam nisl, non scelerisque ligula pretium id. Suspendisse erat tortor, tincidunt nec volutpat et, efficitur
    id tellus. Quisque congue efficitur imperdiet. Vestibulum nec commodo arcu. Curabitur cursus enim ut dapibus elementum.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porta pellentesque velit. Donec mattis lacus in nisl volutpat dapibus. Nulla viverra diam nisl, non scelerisque ligula pretium id. Suspendisse erat tortor, tincidunt nec volutpat et, efficitur
    id tellus. Quisque congue efficitur imperdiet. Vestibulum nec commodo arcu. Curabitur cursus enim ut dapibus elementum.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porta pellentesque velit. Donec mattis lacus in nisl volutpat dapibus. Nulla viverra diam nisl, non scelerisque ligula pretium id. Suspendisse erat tortor, tincidunt nec volutpat et, efficitur
    id tellus. Quisque congue efficitur imperdiet. Vestibulum nec commodo arcu. Curabitur cursus enim ut dapibus elementum.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porta pellentesque velit. Donec mattis lacus in nisl volutpat dapibus. Nulla viverra diam nisl, non scelerisque ligula pretium id. Suspendisse erat tortor, tincidunt nec volutpat et, efficitur
    id tellus. Quisque congue efficitur imperdiet. Vestibulum nec commodo arcu. Curabitur cursus enim ut dapibus elementum.
  </p>

</div>
<div id="link4">
  <h1>Link 4</h1>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porta pellentesque velit. Donec mattis lacus in nisl volutpat dapibus. Nulla viverra diam nisl, non scelerisque ligula pretium id. Suspendisse erat tortor, tincidunt nec volutpat et, efficitur
    id tellus. Quisque congue efficitur imperdiet. Vestibulum nec commodo arcu. Curabitur cursus enim ut dapibus elementum.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porta pellentesque velit. Donec mattis lacus in nisl volutpat dapibus. Nulla viverra diam nisl, non scelerisque ligula pretium id. Suspendisse erat tortor, tincidunt nec volutpat et, efficitur
    id tellus. Quisque congue efficitur imperdiet. Vestibulum nec commodo arcu. Curabitur cursus enim ut dapibus elementum.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porta pellentesque velit. Donec mattis lacus in nisl volutpat dapibus. Nulla viverra diam nisl, non scelerisque ligula pretium id. Suspendisse erat tortor, tincidunt nec volutpat et, efficitur
    id tellus. Quisque congue efficitur imperdiet. Vestibulum nec commodo arcu. Curabitur cursus enim ut dapibus elementum.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porta pellentesque velit. Donec mattis lacus in nisl volutpat dapibus. Nulla viverra diam nisl, non scelerisque ligula pretium id. Suspendisse erat tortor, tincidunt nec volutpat et, efficitur
    id tellus. Quisque congue efficitur imperdiet. Vestibulum nec commodo arcu. Curabitur cursus enim ut dapibus elementum.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porta pellentesque velit. Donec mattis lacus in nisl volutpat dapibus. Nulla viverra diam nisl, non scelerisque ligula pretium id. Suspendisse erat tortor, tincidunt nec volutpat et, efficitur
    id tellus. Quisque congue efficitur imperdiet. Vestibulum nec commodo arcu. Curabitur cursus enim ut dapibus elementum.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porta pellentesque velit. Donec mattis lacus in nisl volutpat dapibus. Nulla viverra diam nisl, non scelerisque ligula pretium id. Suspendisse erat tortor, tincidunt nec volutpat et, efficitur
    id tellus. Quisque congue efficitur imperdiet. Vestibulum nec commodo arcu. Curabitur cursus enim ut dapibus elementum.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porta pellentesque velit. Donec mattis lacus in nisl volutpat dapibus. Nulla viverra diam nisl, non scelerisque ligula pretium id. Suspendisse erat tortor, tincidunt nec volutpat et, efficitur
    id tellus. Quisque congue efficitur imperdiet. Vestibulum nec commodo arcu. Curabitur cursus enim ut dapibus elementum.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porta pellentesque velit. Donec mattis lacus in nisl volutpat dapibus. Nulla viverra diam nisl, non scelerisque ligula pretium id. Suspendisse erat tortor, tincidunt nec volutpat et, efficitur
    id tellus. Quisque congue efficitur imperdiet. Vestibulum nec commodo arcu. Curabitur cursus enim ut dapibus elementum.
  </p>

</div>