我决定尝试只使用 CSS 和 HTML 创建一个选项卡式菜单。使用:target伪类来显示适当的div，我已经实现了它，只是它跳得有点太多以至于对用户友好：
http://brad.sebdengroup.com/newodynsite/stockman.php#StockControl
无论如何我可以解决这个问题吗？最初，我想远离 JavaScript，但如果它解决了这个问题，我会很乐意添加一些。
注意：我知道我可以使用 jQuery/一些花哨的库重建一个新的选项卡式菜单，但如果可能的话，我宁愿修复这个问题。
这是因为您在锚点中使用了哈希值。这会导致它跳转到具有哈希指定的 id 的 div。
要对此进行排序，您可以使用 jQuery 通过使用来停止跳跃.preventDefault();
您可以通过给每个跳跃类的锚点prevent然后使用 jQuery 来停止跳跃来使用它。当然，您可以根据您的 html 结构更改此选择器。
$(".prevent").click(function(e) { //Note the e for event
e.preventDefault();
});
不使用 jQuery 进行编辑
在诅咒没有 jQuery 可以使用之后，我试图组合一个纯 js 解决方案。您需要检查此项以确保它在您的页面上有效。
我所做的是找到页面上的所有锚点，然后将 return false 添加到它们的 onclick 属性中。如果这要在您的实时站点上进行，您将需要进一步选择锚点，请参阅此示例和说明：
我还为你不想跳的锚添加了一个类。要使用它，您需要将“menuControl”类添加到要停止跳跃的任何锚点。
下面是我的 JavaScript 以防 jsfiddle 链接损坏。顺便提一下，但您现在需要使用 JavaScript 控制这些选项卡的导航，因为使用return false将停止导航。
var anchors = document.getElementsByTagName("a");
for(var i = 0; i < anchors.length; i++) {
if ( anchors[i].className == "menuControl" ) {
anchors[i].setAttribute("onclick", "return false");
}
}
您可以window.scrollTo(0, 0);在每次单击后使用滚动回文档顶部，它很可能发生得太快，以至于任何用户都无法注意到。
对于水平跳转，你可以overflow-y: scroll在你的身体上使用，这样滚动条就一直在页面上，即使没有足够的内容导致滚动。
您可以将页面的最小高度设置为 div 使用 css 移动到顶部所需的高度。
body { min-height: 1000px; }
用您需要的任意数量的 px 替换 1000px。
这将防止所有超出使浏览器视图以 div 为目标的初始点击的跳转。
这就像点击销售订单处理，然后点击现在的工作订单处理。如果您不希望页面加载时出现所有额外的空白，则可以仅在单击选项卡时设置高度。
你有一个问题，因为你的容器高度是如此不同。
我建议您将所有内容容器包装在一个没有样式的 div 中。然后循环遍历所有容器。计算容器的最大高度。然后给所有的包装 div 这个最大高度。
我会使用 jQuery 让它平滑滚动。这里有一个很好的演示。
$(window).scroll(function () {
var newTop = $(window).scrollTop();
if (newTop <= 130){
newTop = 130;
}
$("#idofElementToScroll").stop()
.animate({'top': newTop}, "slow");
});
这是我在个人网站的私有部分中编写并实现的功能。
这里发生的是你声明你当前在屏幕上的位置，然后当你向下滚动时，你正在滚动的元素会随着你平滑滚动。
我知道你要求移动锚点，但你可以很容易地调整这个功能来达到这个目的。
请注意，“130”是指我希望移动元素与窗口顶部的最小距离。
祝你好运！
按照Stu Nicholls的示例，使用带有目标伪类的兄弟选择器来避免此问题，但要注意Webkit 错误：
<!doctype html>
<html lang="en">
<head>
<title>CSS Target Navigation</title>
<style type="text/css">
/* ================================================================
This copyright notice must be untouched at all times.
The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/cssplay-page-menu.html
Copyright (c) Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any
way to fit your requirements.
=================================================================== */
#cssplayPages {width:690px; height:400px; position:relative; margin:20px auto;}
#cssplayPages #navigate {padding:0; margin:35px 0 0 0; list-style:none; width:160px; text-align:right; float:left;}
#cssplayPages #navigate li {float:left; width:160px; margin:0 0 5px 0;}
#cssplayPages #navigate li a {display:block; width:140px; padding:0 10px; background:#ddd; font:bold 13px/35px arial, sans-serif; text-decoration:none; color:#000; border-radius:5px;
-moz-transition: 0.5s;
-ms-transition: 0.5s;
-o-transition: 0.5s;
-webkit-transition: 0.5s;
transition: 0.5s;
}
#cssplayPages #navigate li a:hover {background:#6cf;}
#cssplayPages #navigate.john a {background:#6cf;}
.targets {display:none;}
#cssplayPages div {position:absolute; width:0; left:190px; top:0; opacity:0; height:0px; overflow:hidden;
-moz-transition: 1.5s;
-ms-transition: 1.5s;
-o-transition: 1.5s;
-webkit-transition: 1.5s;
transition: 1.5s;
}
#cssplayPages div.constable {height:400px; width:500px; opacity:1;}
#cssplayPages div img {float:left; padding:0 10px 10px 0;}
#cssplayPages div h2 {padding:0 0 10px 0; margin:0; font: 24px/24px arial, sans-serif;}
#cssplayPages div p {padding:0 0 10px 0; margin:0; font: 13px/18px arial, sans-serif; text-align:justify;}
#constable:target ~ #navigate .john a {background:#6cf;}
#constable:target ~ .constable {height:400px; width:500px; opacity:1;}
#monet:target ~ #navigate .claude a {background:#6cf;}
#monet:target ~ #navigate .john a {background:#ddd;}
#monet:target ~ #navigate .john a:hover {background:#6cf;}
#monet:target ~ .constable {height:0; width:0; opacity:0;}
#monet:target ~ .monet {height:400px; width:500px; opacity:1;}
#vangogh:target ~ #navigate .vincent a {background:#6cf;}
#vangogh:target ~ #navigate .john a {background:#ddd;}
#vangogh:target ~ #navigate .john a:hover {background:#6cf;}
#vangogh:target ~ .constable {height:0; width:0; opacity:0;}
#vangogh:target ~ .vangogh {height:400px; width:500px; opacity:1;}
#chagall:target ~ #navigate .marc a {background:#6cf;}
#chagall:target ~ #navigate .john a {background:#ddd;}
#chagall:target ~ #navigate .john a:hover {background:#6cf;}
#chagall:target ~ .constable {height:0; width:0; opacity:0;}
#chagall:target ~ .chagall {height:400px; width:500px; opacity:1;}
#picasso:target ~ #navigate .pablo a {background:#6cf;}
#picasso:target ~ #navigate .john a {background:#ddd;}
#picasso:target ~ #navigate .john a:hover {background:#6cf;}
#picasso:target ~ .constable {height:0; width:0; opacity:0;}
#picasso:target ~ .picasso {height:400px; width:500px; opacity:1;}
</style>
</head>
<body>
<div id="cssplayPages">
<b class="targets" id="constable"></b>
<b class="targets" id="monet"></b>
<b class="targets" id="vangogh"></b>
<b class="targets" id="chagall"></b>
<b class="targets" id="picasso"></b>
<ul id="navigate">
<li class="john"><a href="#constable" onClick="history.go(1)">John Constable ☛</a></li>
<li class="claude"><a href="#monet" onClick="history.go(1)">Claude Monet ☛</a></li>
<li class="vincent"><a href="#vangogh" onClick="history.go(1)">Vincent Van Gogh ☛</a></li>
<li class="marc"><a href="#chagall" onClick="history.go(1)">Marc Chagall ☛</a></li>
<li class="pablo"><a href="#picasso" onClick="history.go(1)">Pablo Picasso ☛</a></li>
</ul>
<div class="constable">
<h2>John Constable</h2>
<img src="painters/constable2.jpg" alt="The Hay Wain" title="The Hay Wain" />
<p>Although he showed an early talent for art and began painting his native Suffolk scenery before he left school, his great originality matured slowly.</p>
<p>He committed himself to a career as an artist only in 1799, when he joined the Royal Academy Schools and it was not until 1829 that he was grudgingly made a full Academician, elected by a majority of only one vote.</p>
<p>In 1816 he became financially secure on the death of his father and married Maria Bicknell after a seven-year courtship and in the fact of strong opposition from her family. During the 1820s he began to win recognition: The Hay Wain (National Gallery, London, 1821) won a gold medal at the Paris Salon of 1824 and Constable was admired by <a href="http://www.ibiblio.org/wm/paint/auth/delacroix/">Delacroix</a> and Bonington among others.</p>
<p>His wife died in 1828, however, and the remaining years of his life were clouded by despondency.</p>
<p>This text is an excerpt from <a href="http://www.ibiblio.org/wm/paint/auth/constable/">The WebMuseum, Paris</a></p>
</div>
<div class="monet">
<h2>Claude Monet</h2>
<img src="painters/monet2.jpg" alt="Women in the Garden" title="Women in the Garden" />
<p>His youth was spent in Le Havre, where he first excelled as a caricaturist but was then converted to landscape painting by his early mentor <a href="http://www.ibiblio.org/wm/paint/auth/boudin/">Boudin</a>, from whom he derived his firm predilection for painting out of doors.</p>
<p>In 1859 he studied in Paris at the Atelier Suisse and formed a friendship with <a href="http://www.ibiblio.org/wm/paint/auth/pissarro/">Pissarro</a>. After two years' military service in Algiers, he returned to Le Havre and met <a href="http://www.ibiblio.org/wm/paint/auth/jongkind/">Jongkind</a>, to whom he said he owed `the definitive education of my eye'.</p>
<p>He then, in 1862, entered the studio of Gleyre in Paris and there met Renoir, Sisley, and Bazille, with whom he was to form the nucleus of the Impressionist group.</p>
<p>Monet's devotion to painting out of doors is illustrated by the famous story concerning one of his most ambitious early works, Women in the Garden (Musée d'Orsay, Paris; 1866-67). The picture is about 2.5 meters high and to enable him to paint all of it outside he had a trench dug in the garden so that the canvas could be raised or lowered by pulleys to the height he required.</p>
<p>This text is an excerpt from <a href="http://www.ibiblio.org/wm/paint/auth/monet/">The WebMuseum, Paris</a></p>
</div>
<div class="vangogh">
<h2>Vincent Van Gogh</h2>
<img src="painters/vincent2.jpg" alt="The Starry Night" title="The Starry Night" />
<p>Gogh, Vincent (Willem) van (b. March 30, 1853, Zundert, Neth.--d. July 29, 1890, Auvers-sur-Oise, near Paris), generally considered the greatest Dutch painter and draughtsman after <a href="http://www.ibiblio.org/wm/paint/auth/rembrandt/">Rembrandt</a>.</p>
<p>With <a href="http://www.ibiblio.org/wm/paint/auth/cezanne/">Cézanne</a> and <a href="http://www.ibiblio.org/wm/paint/auth/gauguin/">Gauguin</a> the greatest of Post-Impressionist artists. He powerfully influenced the current of <a href="http://www.ibiblio.org/wm/paint/glo/expressionism/">Expressionism</a> in modern art. His work, all of it produced during a period of only 10 years, hauntingly conveys through its striking colour, coarse brushwork, and contoured forms the anguish of a mental illness that eventually resulted in suicide. Among his masterpieces are numerous self-portraits and the well-known <a href="http://www.ibiblio.org/wm/paint/auth/gogh/starry-night/">The Starry Night</a> (1889).</p>
<p>This text is an excerpt from <a href="http://www.ibiblio.org/wm/paint/auth/gogh/">The WebMuseum, Paris</a></p>
</div>
<div class="chagall">
<h2>Marc Chagall</h2>
<img src="painters/chagall2.jpg" alt="Adam and Eve" title="Adam and Eve" />
<p>Russian-born French painter. Born to a humble Jewish family in the ghetto of a large town in White Russia, Chagall passed a childhood steeped in Hasidic culture.</p>
<p>Very early in life he was encouraged by his mother to follow his vocation and she managed to get him into a St Petersburg art school. Returning to Vitebsk, he became engaged to Bella Rosenfeld (whom he married twelve years later), then, in 1910, set off for Paris, 'the Mecca of art'.</p>
<p>He was a tenant at La Ruche, where he had Modigliani and Soutine for neighbours. His Slav Expressionism was tinged with the influence of <a href="http://www.artchive.com/artchive/D/daumier.html">Daumier</a>, Jean-François Millet, the Nabis and the Fauves.</p>
<p>He was also influenced by <a href="http://www.artchive.com/artchive/cubism.html">Cubism</a>. Essentially a colourist, Chagall was interested in the Simultaneist vision of Robert Delaunay and the Luminists of the Section d'Or.</p>
</div>
<div class="picasso">
<h2>Pablo Picasso</h2>
<img src="painters/picasso2.jpg" alt="Girtl in front of mirror" title="Girtl in front of mirror" />
<p>Pablo Picasso, born in Spain, was a child prodigy who was recognized as such by his art-teacher father, who ably led him along.</p>
<p>The small Museo de Picasso in Barcelona is devoted primarily to his <a href="http://www.artchive.com/artchive/P/picasso_early.html">early works</a>, which include strikingly realistic renderings of casts of ancient sculpture.</p>
<p>He was a rebel from the start and, as a teenager, began to frequent the Barcelona cafes where intellectuals gathered.</p>
<p>He soon went to Paris, the capital of art, and soaked up the works of Manet, Gustave Courbet, and <a href="http://www.artchive.com/artchive/T/toulouse-lautrec.html">Toulouse-Lautrec</a>, whose sketchy style impressed him greatly. Then it was back to Spain, a return to France, and again back to Spain - all in the years 1899 to 1904.</p>
</div>
</div>
<p class="info">copyright © stu nicholls - CSS play</p>
</div> <!-- end info -->
</body>
</html>
这是另一个建议：
<style>
nav ~ div {
display: none;
}
.tab {
position:fixed;
top:0;
}
:target:not([id="box1"]) ~ .box1 {
display: none;
}
#box1:target ~ nav .box1,
#box2:target ~ nav .box2,
#box3:target ~ nav .box3 {
color:red;
}
#box1:target ~ div.box1,
#box2:target ~ div.box2,
#box3:target ~ div.box3 {
display:block;
}
</style>
<section id="content">
<div id="box1" class="tab"></div>
<div id="box2" class="tab"></div>
<div id="box3" class="tab"></div>
<nav>
<a href="#box1" class="box1">box1</a>
<a href="#box2" class="box2">box2</a>
<a href="#box2" class="box3">box3</a>
</nav>
<div class="box1">
blah
</div>
<div class="box2">
blah
</div>
<div class="box3">
blah
</div>
</section>
由于锚是固定的，这应该可以解决问题。它可以跳一次，但以后就不会了。