停止錨從滾動到頂部！

我試圖建立一個網站，所有'網頁'在一個單一的文件。每個'頁面'是一個錨定的部分，所以當我從位於站點頂部的主導航中調用它時，部分滑入視圖。但我有兩個問題：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

停止錨從滾動到頂部！

回答

相關問題