css - 带有嵌套 anchor 的锚定 div

Question

在我的网站上，我有两个大的 (100% x 100%) div 垂直堆叠在一个页面上。每个 div 中都有几个部分，每个部分都有一个 anchor 。我在左侧有两个 float 侧边栏(一次只能看到一个)，每个 anchor 都有相应的链接。第一个侧边栏包含 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:

<a id="DivOne"><div id="DivOne"></a>
  <div id="Container">
    <a id="OneSectionOne">Title One</a>
         <p>Content</p>
    <a id="OneSectionTwo">Title Two</a>
         <p>Content</p>
    <a id="OneSectionThree">Title Three</a>
         <p>Content</p>
  </div>
</div>

<a id="DivTwo"><div id="DivTwo"></a>
  <div id="Container">
    <a id="TwoSectionOne">Title One</a>
         <p>Content</p>
    <a id="TwoSectionTwo">Title Two</a>
         <p>Content</p>
    <a id="TwoSectionThree">Title Three</a>
         <p>Content</p>
  <div>
</div>

每个 div 都是 100% x 100%，DivTwo 位于顶部:100%；

我遇到的问题是，当我单击边栏中的链接时，它会将整个页面向上移动，以便 anchor 位于页面顶部。我希望它只将“容器”div 滚动到适当的位置，而不是整个页面。它似乎在底部 div (DivTwo) 上工作，但我很确定那只是因为它位于页面底部，并且无法进一步滚动。我试过给 div 一个“位置:固定；”但这失去了交换的能力。我也考虑过水平对齐 div，但效果不佳。

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，所以现在它在 left:100%;

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

因为它们都位于屏幕底部，所以没有什么可以滚动和显示的。修复有点粗略，但它似乎奏效了!

感谢所有提供帮助的人!

Answer 1

我认为您不能单独使用 anchor 来完成此操作，但您可以使用 scrollIntoView() 方法使用 JavaScript 来完成此操作。这是一个 JSFiddle:

http://jsfiddle.net/gBd25/

在此示例中，单击链接时只有底部的 div 会滚动。