基本上，我正在为我的学校项目创建一个网页...抱歉愚蠢的解释但是......
我希望在网站顶部有固定的导航栏，当您点击任何链接时，它会向上或向下移动到所请求的内容（不是向不同的子页面，只是向上/向下滚动）..
请参阅此处的示例：http://www.danbrown.com/
然而，我只需要最简单的方法来做到这一点......而且我没有找到任何教程。
由于
答案 0 :(得分：0)
您需要为您的菜单使用固定位置。 http://www.w3schools.com/css/css_positioning.asp
要滚动到页面中的特定位置，请使用链接锚点。 http://www.echoecho.com/htmllinks08.htm
我可以为你编写代码，但你什么都不会学到。
答案 1 :(得分：0)
链接锚点是完成您想要的最简单，最可靠的方法。
<a name="a">text</a>或<a id="a">text</a>都在某处设置了一个锚点，<a href="#a">text</a>会将视口滚动到该链接。
您还可以在其他元素（例如标题）上设置id属性，使其成为锚定目标，但name属性仅适用于<a>标记。
答案 2 :(得分：0)
作为起点，您可以使用以下twitter bootstrap演示来执行固定导航栏。 只需要jquery代码来制作滚动动画。它也适用于jQuery。 在演示中，您应该对导航执行更改效果以显示当前滚动位置。这不在演示中。
您可以在jsFiddle找到相同的代码。
初始滚动效果并不难。请检查此SO question中的anwser，它将帮助您实现这一效果。 （您也可以使用计数器示例中的代码进行固定导航，并执行自己的菜单样式。）
$(function () {
// source for transition animation from here: https://stackoverflow.com/questions/12643510/css3-transitions-with-anchors
$('a[href^=#]').on("click", function (e) {
var t = $(this.hash);
var t = t.length && t || $('[name=' + this.hash.slice(1) + ']');
if (t.length) {
var tOffset = t.offset().top;
$('html,body').animate({
scrollTop: tOffset - 20
}, 'slow');
e.preventDefault();
}
});
});body {
min-height: 2000px;
padding-top: 50px;
}
/* anchor style to scroll to the right position */
a.anchor {
display: block;
position: relative;
top: -20px;
visibility: hidden;
}<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button> <a class="navbar-brand" href="#">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#dummy1">Dummy 1</a>
</li>
<li><a href="#dummy2">Dummy 2</a>
</li>
<li><a href="#contact">Contact</a>
</li>
<li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a>
</li>
<li><a href="#">Another action</a>
</li>
<li><a href="#">Something else here</a>
</li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a>
</li>
<li><a href="#">One more separated link</a>
</li>
</ul>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</nav>
<div class="container">
<div class="row"> <a class="anchor" id="dummy1"></a>
<h1>Dummy 1</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,</p>
</div>
<div class="row"> <a class="anchor" id="dummy2"></a>
<h1>Dummy 2</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,</p>
</div>
</div>