使用html和javascript (平滑滚动)

Question

我试着在我的网站上添加平滑滚动。在从这个网站：http://www.dwuser.com/education/content/quick-guide-adding-smooth-scrolling-to-your-webpages/复制了javascript和jquery之后，我添加了平滑滚动的标记。平滑的滚动除导航条上的一个按钮外，一切正常工作。这是代码：

<nav id="nav">
  <div class="navbar">
    <div class="brand"><a href="#" class="smoothScroll">hbvhaf</a></div>
    <ul>
      <li><a href="#welcome" class="smoothScroll"><span>about</span></a></li>
      <li><a href="#hotelinfo" class="smoothScroll"><span>bvdsvudva</span></a></li>
      <li><a href="#dining" class="smoothScroll"><span>contact</span></a></li>

    </ul>
  </div><!-- navbar -->
</nav>

一个按钮不平滑滚动是一个有一个div类的“品牌”。div用于在css中专门设置该按钮的样式。任何想法。

Answer 1

我知道这有点麻烦，但你为什么不把它添加到页面的顶部：

<div name="top"></div>

然后将代码更改为：

<nav id="nav">
  <div class="navbar">
    <div class="brand"><a href="#top" class="smoothScroll">hbvhaf</a></div>
    <ul>
      <li><a href="#welcome" class="smoothScroll"><span>about</span></a></li>
      <li><a href="#hotelinfo" class="smoothScroll"><span>bvdsvudva</span></a></li>
      <li><a href="#dining" class="smoothScroll"><span>contact</span></a></li>

    </ul>
  </div><!-- navbar -->
</nav>

为作者编辑，其示例正常工作：

<div name="top">I am the top of the page.</div>
<a href="#contact" class="smoothScroll">Go To Contact Form</a>

<div style="height:200%"></div>

<div name="contact">contact</div>
<a href="#top" class="smoothScroll">Back to top</a>

<div style="height:200%"></div>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="smoothscroll.js"></script>