嵌套錨定錨

在我的網站上，我有兩個垂直堆疊在一個頁面上的大型（100％x 100％）div。每個div都有幾個部分，每個部分都有一個錨點。我在左邊有兩個浮動側邊欄（一次只能看到一個），鏈接適合每個錨。第一個邊欄有DivOne的鏈接，第二個邊欄有DivTwo的鏈接。每個側欄中還有一個鏈接，用於「交換」側邊欄和div。側邊欄看起來像：嵌套錨定錨

<div id="SidebarOne"> 
    <a href="#DivTwo">second screen</a> 
    <a href="#OneSectionOne">Section One</a> 
    <a href="#OneSectionTwo">Section Two</a> 
    <a href="#OneSectionThree">Section Three</a> 
</div>

我已經減少了CSS和HTML到我認爲相關的基礎知識。這裏的CSS：

#DivOne { 
    top:0%; 
    left:0%; 
    } 

#DivTwo { 
    top:100%; 
    left:0%; 
    } 

#DivOne, #DivTwo { 
    width:100%; 
    height:100%; 
    overflow:hidden; 
    position: absolute; 
    display: block; 
    } 

#Container { 
    left: 50px; 
    top: 0px; 
    height: 500px; 
    width: 500px; 
    overflow: auto; 
    position: relative; 
    }

和HTML：

每一個的div的是100％×100％，以DivTwo位於頂部：100％;

我遇到的問題是，當我單擊邊欄中的鏈接時，它會將整個頁面向上移動，以便錨點位於頁面的頂部。我希望它只能滾動「容器」div到合適的位置，而不是整個頁面。它似乎在底部div（DivTwo）上工作，但我確信這只是因爲它坐在頁面的底部，並且它不能進一步物理滾動。我試過給div一個'位置：固定的'但是失去了交換的能力。我認爲水平對齊divs，但不能很好地工作。

Here is a demo of what I've got where you can see the problem. As you click links in the first section, the whole container moves up, revealing the section with the lighter background.

那麼，怎樣才能讓我只有「容器」 DIV滾動，而不是整個頁面？

在此先感謝！

----------- -------------編輯

我找到了答案：

Here's a demo.

基本上，我只需要移動第二個div，所以現在左邊：100％;

#DivOne { 
top: 0%; 
left: 100%; 
}

因爲它們都擱在屏幕的底部，所以它沒有任何東西可以滾動和顯示。有點粗略的解決方法，但它似乎已經奏效！

感謝大家誰幫助，但！

來源

2013-10-17 user2445289

行你上一些現場的代碼？ – DaniP

http://jsfiddle.net/jd4kt/ - 有一個簡化版本。基本上，在第一部分（背景較暗）中，當你點擊一個鏈接時，整個屏幕向上滑動，顯露出較輕的第二個容器。這就是我希望刪除的內容。如果可能，不使用Javascript。 :) – user2445289

我不認爲你可以單獨使用錨，但可以使用scrollIntoView()方法通過JavaScript來完成。這裏是一個的jsfiddle：

http://jsfiddle.net/gBd25/

在這個例子中，被點擊的鏈接時，只有底部DIV獲取滾動。

來源

2013-10-17 16:21:01 mayabelle

你有沒有試圖改變

#DivOne { 
    top:0%; 
    left:0%; 
}

到

#DivOne { 
    top:100%; 
    left:0%; 
}

來源

2013-10-17 17:59:02

回答

相關問題