阻止锚点滚动到顶部！

如何解决阻止锚点滚动到顶部！

| 我正在尝试建立一个网站，其中所有“页面”都在一个文档中。每个“页面”都是一个固定部分，因此，当我从位于站点顶部的主导航中调用该部分时，该部分就会滑入视图。但是我有两个问题：1）当我从网站外部链接时，我希望能够链接到任何单独的锚定部分而无需向上滚动页面（因为这样您就看不到位于页面顶部的导航顶部）和2）我希望这样做，以便在刷新时不会从头开始。为了理解我的意思，这是一个网站，该网站具有与我所看到的完全相同的可滑动内容的视图布局，此外还确切说明了我想要拥有的内容： http://www.incub.ro/#page-news 请注意，不仅锚名称出现在地址栏上，而且页面本身已完全加载，并且不会将锚定主题向上滚动到顶部？是的，这就是我要达到的目标！ 我的代码如下所示： HTML代码------

<!-- Commence Navigation -->

<div class=\"wrapper\">

<div id=\"headcontainer\">
  <div id=\"banner\"><a href=\"#home\" class=\"panel\"><img src=\"images/layout/0_homepage.png\" id=\"top\" height=\"100\" width=\"420\"border=\"0\" /></a>

    <div id=\"navigation\">
    <div class=\"center\">
    <ul id=\"topnav\">
        <li><a href=\"#link1\" class=\"panel\">Link 1</a></li> 
        <li><a href=\"#link2\" class=\"panel\">Link 2</a></li> 
        <li><a href=\"#link3\" class=\"panel\">Link 3</a></li> 
        <li><a href=\"#link4\" class=\"panel\">Link 4</a></li>
    </ul>
    </div>
    </div>
  </div>
</div>

<!-- End Navigation -->


<!-- Commence Content -->

<div id=\"wrapper\">
<div id=\"mask\">


    <div id=\"home\" class=\"item\">
    <a name=\"home\"></a>
    <div id=\"container-slideshow\"></div>
    </div>
    </div>

    <div id=\"link1\" class=\"item\">
    <a name=\"link1\"></a>
    <div class=\"content\">
    </div>
    </div>

    <div id=\"link2\" class=\"item\">
    <a name=\"link2\"></a>
    <div class=\"content\">
    </div>
    </div>

    <div id=\"link3\" class=\"item\">
    <a name=\"link3\"></a>
    <div class=\"content\">
    </div>
    </div>

    <div id=\"link4\" class=\"item\">
    <a name=\"about\"></a>
    <div class=\"content\">
    </div>
    </div>

   </div> 
   </div> 
   </div>
   <!-- End Content -->

   <div class=\"footer\"> </div>

CSS代码------

body {
    font-family: Helvetica,Arial,sans-serif;
    font-size: 0.8em;
    background-color: #131419;
    background-attachment: fixed;
    background-image: url(\"../images/layout/background_lrg2.jpg\");
    background-position: center top;
    width:100%;
    overflow:hidden;
    padding: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-left: 0px;
}

.wrapper {
    min-height: 100%;
    height: 70%;
    margin-top: 0;
    margin-right: auto;
    margin-left: auto;
    overflow:hidden; 
  }

#wrapper {
    width:100%;
    height:100%;
    position:relative;
    top:0px;
    left:0;
    overflow:hidden;
}


#mask {
    width:900%;
    height:100%;
    overflow:hidden;
}

.item {
    width:11.1%;
    height:100%;
    float:left;
    margin-right: auto;
    margin-left: auto;
    position:relative;
    top:30px;
    overflow:hidden;
}

.content {
    font-family: Helvetica,sans-serif;
    color: #d1d1d1;
    font-size: 14px;
    line-height: 22px;
    width: 1000px;
    overflow:auto;
    padding-left: 30px;
    padding-right: 10px;
    padding-bottom: 10%;
    position:relative;
    margin-top: 0;
    margin-right: auto;
    margin-left: auto;
}

我希望这是有道理的。提前致谢！     

解决方法

        您愿意使用jQuery吗？如果是这样，则此代码段可能会有所帮助：

$(function() {
    // assigns click action for the a\'s
    $(\'#topnav a\').click(function(e) {
        // prevent default behavior so clicking the <a> won\'t go up
        e.preventDefault();
        // get the anchor in the <a> and change the window hash
        // e.g. http://site.com/#link4
        window.location.hash = $(this).attr(\'href\');
    });
});

    ,        好的，最后我设法找到了解决锚点向上滚动问题的方法。只需将#headcontainer的位置更改为\“ fixed \”并将其移动到HTML页面的底部即可达到目的，并在我的内容类中添加\“ top：200px; \”，这样我们就可以看到导航。 因此，在tradyblix的帮助下，虽然当我单击导航上的链接时内容上会出现一种奇怪的“闪烁”，但是这从本质上解决了我的问题。我真的不知道该怎么解释。它以前不存在，所以它与新代码有关...