停止锚从滚动到顶部！

我试图建立一个网站，所有'网页'在一个单一的文件。每个'页面'是一个锚定的部分，所以当我从位于站点顶部的主导航中调用它时，部分滑入视图。但我有两个问题：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, 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; 
}

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

来源

2011-05-31 Kelly

你是否愿意使用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'); 
    }); 
});

来源

2011-05-31 10:20:55 tradyblix

是的，是的，我是！我忘了提及，我一直在使用它为我的网站抱歉。非常感谢，而锚名称确实出现在URL上，不幸的是页面仍然向上滚动。 – Kelly 2011-05-31 10:50:51

好吧，我终于设法找到了解决锚向上滚动发行。只需将#headcontainer的位置更改为“fixed”并将其移动到HTML页面的底部就可以实现，并添加“top：200px;”到我的内容类，以便我们可以看到导航。

所以在tradyblix的帮助下，这基本上解决了我的问题，虽然当我点击导航上的链接时会出现一种奇怪的“闪烁”现象。我真的不知道如何解释它。它之前没有，所以它必须与新代码...

来源

2011-06-01 08:22:40 Kelly

停止锚从滚动到顶部！

回答

相关问题