我决定尝试使用CSS和HTML创建一个标签式菜单。使用:target伪类来显示适当的div，我实现了它，只是它跳得太多而不方便用户使用：
http://brad.sebdengroup.com/newodynsite/stockman.php#StockControl
无论如何我能解决这个问题吗？最初，我想远离JavaScript，但如果能解决这个问题，我会很乐意添加一些。
注意：我知道我可以使用jQuery /某些花哨的库重建一个新的选项卡式菜单，但如果可能的话，我宁愿修复它。
答案 0 :(得分：8)
因为您在锚中使用哈希值。这会导致它跳转到具有哈希指定的id的div。
要对此进行排序，您可以使用jQuery通过.preventDefault();
你可以通过给每个跳过prevent类的锚点然后使用jQuery来停止跳跃来使用它。当然，您可以根据您的html结构更改此选择器。
$(".prevent").click(function(e) { //Note the e for event
e.preventDefault();
});
不使用jQuery编辑
在诅咒没有使用jQuery之后，我试图整合一个纯粹的js解决方案。您需要检查一下以确保它在您的页面上有效。
我所做的是找到页面上的所有锚点，然后在其onclick属性中添加return false。如果要在您的实际网站上进行此操作，则需要进一步选择锚点，请参阅此example和解释：
我还为你不想跳的锚添加了一个类。要使用此功能，您需要将“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");
}
}
答案 1 :(得分：2)
您可以在每次点击后使用window.scrollTo(0, 0);滚动回到文档的顶部，很可能发生的速度太快，任何用户都无法注意到。
对于水平跳跃，您可以在身体上使用overflow-y: scroll，以便滚动条始终位于页面上，即使内容不足以导致滚动。
答案 2 :(得分：2)
您可以将页面的最小高度设置为div使用css移动到顶部所需的高度。
body { min-height: 1000px; }
用你需要的px替换1000px。
这样可以防止所有跳转超出使浏览器视图成为div的初始点击。
就像点击“销售订单处理”然后单击“现在订购处理”一样。如果您不想在页面加载时显示所有额外的空白区域，则只有在单击选项卡时才能设置高度。
答案 3 :(得分：1)
我会使用jQuery使其顺利滚动。有一个很好的演示here。
答案 4 :(得分：1)
$(window).scroll(function () {
var newTop = $(window).scrollTop();
if (newTop <= 130){
newTop = 130;
}
$("#idofElementToScroll").stop()
.animate({'top': newTop}, "slow");
});
这是我在个人网站上的私人部分编写和实现的功能。
这里发生的事情是你声明你当前在屏幕上的位置，然后向下滚动你滚动的元素顺利滚动。
我知道您要求移动锚点，但您可以非常轻松地将此功能用于此目的。
请注意，'130'指的是我希望移动元素位于窗口顶部的最小距离。
祝你好运！
答案 5 :(得分：1)
你遇到了问题，因为你的容器高度是如此不同。
我建议你将所有内容容器包装在一个无样式的div中。然后循环遍历所有容器。计算容器的最大高度。然后给所有包装div这个最大高度。
答案 6 :(得分：0)
使用带有目标伪类的兄弟选择器来避免此问题，遵循Stu Nicholls的示例，但要注意Webkit bug：
<!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>
答案 7 :(得分：0)
这是另一个建议：
<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>
这应该可以解决锚点固定的问题。它可以跳一次，但之后就不会了。