单击我的菜单中的关于或联系人后如何滚动到div？

Question

单击我的菜单中的关于或联系人后如何滚动到div(例如:#about,#contact)？

<div class="masthead">
    <ul class="nav nav-pills pull-right">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
    <h3 class="muted">Name site</h3>
</div>

Answer 1

你的HTML:

<div class="masthead">
    <ul class="nav nav-pills pull-right">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#contact">Contact</a></li>
    </ul>
    <h3 class="muted">Name site</h3>
</div>
<div id="about">about</div>
<div id="contact">contact</div>

你的javascript:

$('ul.nav').find('a').click(function(){
    var $href = $(this).attr('href');
    var $anchor = $('#'+$href).offset();
    window.scrollTo($anchor.left,$anchor.top);
    return false;
});

如果要使用动画,请替换

window.scrollTo($anchor.left,$anchor.top);

通过

$('body').animate({ scrollTop: $anchor.top });

Answer 2

这比你想象的要容易。

  <div class="masthead">
    <ul class="nav nav-pills pull-right">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#About">About</a></li>
      <li><a href="#Contact">Contact</a></li>
    </ul>
    <h3 class="muted">Name site</h3>
  </div>


<div id="About">Here's my about</div>

...

<div id="Contact">Here's my contact</div>

通过使用哈希，它将自动滚动到具有该 id 的元素（或具有该name属性的锚点）。如果你想让它平滑滚动，你可以使用 javascript 库（例如 jquery）增强滚动效果。请参阅此问题：How to Scroll HTML page to givenanchor using jQuery or Javascript?