Javascript 阻止锚点滚动到顶部！

我试图建立一个网站，所有的“页面”都在一个文档中。每个“页面”都是一个锚定部分，因此当我从位于站点顶部的主导航调用它时，该部分将滑入视图。但我有两个问题：1）当我从网站外部链接时，我希望能够链接到任何单独的锚定部分，而不让页面向上滚动（因为这样你就看不到位于顶部的导航）和2）我希望这样，如果我刷新，页面就不会从头开始。为了理解我的意思，这里有一个网站，它的滑动内容到视图布局与我的完全相同，并准确地说明了我想要的内容：

请注意，地址栏上不仅会显示锚定主题的名称，而且页面本身也会完整加载，并且不会将锚定主题向上滚动到顶部？是的，这就是我想要实现的

我的代码如下所示：

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>

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, Arial, 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');
    });
});

$（函数（）{
//为a指定单击操作
$（“#topnav a”）。单击（函数（e）{
//防止默认行为，以使单击将不会启动
e、 预防默认值（）；
//在中获取锚点并更改窗口哈希
//例如。http://site.com/#link4
window.location.hash=$（this.attr（'href'）；
});
});

好的，我终于找到了锚向上滚动问题的解决方案。只需将#headcontainer的位置更改为“fixed”并将其移动到HTML页面的底部就可以了，同时在我的内容类中添加“top:200px；”，这样我们就可以看到导航了

---

在tradyblix的帮助下，这基本上解决了我的问题，尽管当我点击导航上的链接时，内容会出现一种奇怪的“闪烁”。我真的不知道该怎么解释。虽然之前没有，但这与新代码有关…

是的，是的，我是！我忘了提到我一直在我的网站上使用它对不起。非常感谢，虽然锚名称确实出现在URL上，但不幸的是页面仍然向上滚动。