Question

在我的网站上，我有两个大的（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：

<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％;

我遇到的问题是，当我点击侧边栏中的链接时，它会向上移动整个页面，以便锚点位于页面顶部。我希望它只将“容器”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滚动而不是整个页面呢？

提前致谢！

----------- EDIT -------------

我找到了答案：

Here's a demo.

基本上，我只需要移动第二个div，所以现在它在左边：100％;

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

因为它们都停留在屏幕的底部，所以没有任何内容可以滚动显示。有点粗略修复，但它似乎有效！

感谢所有帮助过的人！

Answer 1

我不认为你可以单独用锚点来做这件事，但你可以使用scrollIntoView()方法用JavaScript来做到这一点。这是一个JSFiddle：

http://jsfiddle.net/gBd25/

在此示例中，单击链接时仅滚动底部div。

Answer 2

您是否尝试过更改

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

到

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

具有嵌套锚点的锚定div

2 个答案: