我尝试将平滑滚动添加到我的网站。从这个网站复制javascript和jquery之后:http://www.dwuser.com/education/content/quick-guide-adding-smooth-scrolling-to-your-webpages/我添加了平滑滚动的标签。平滑滚动适用于导航栏上的一个按钮以外的所有内容。这是代码:
<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>
没有平滑滚动的一个按钮是具有&#34;品牌&#34;的div类的按钮。 div用于在css中专门设置该按钮的样式。任何想法。
答案 0 :(得分: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>