1

我已经命名了锚点，它们正确地引导了我，但是当我按下浏览器的后退按钮时，它并没有把我带到屏幕顶部。我已将问题缩小到 css overflow: auto in #divScreen css 部分。

HTML (pastebin): http://pastebin.com/aRvtBzCt CSS (pastebin): http://pastebin.com/Qkkiz98x

任何人都知道发生了什么，以及如何解决？该问题在所有主要浏览器（firefox、chrome、opera）中都存在。

HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml">    <head>      <link href="index2.css" rel="stylesheet" type="text/css"/>  </head> <body>      <div id="divScreen">            <div id="divFAQ" class="cCommonDivs">                               <span id="spanFAQTitle" class="cPagesTitle">Frequently Asked Questions</span>               <p></p>             <div id="divFAQQuestions" class="cBigLinks">                    <ul>                        <li><a href="#aQ1b" id="aQ1h">Q1</a><br/></li>                      <li><a href="#aQ2b" id="aQ2h">Q2</a><br/></li>                      <li><a href="#aQ3b" id="aQ3h">Q3</a><br/></li>                      <li><a href="#aQ4b" id="aQ4h">Q4</a><br/></li>                  </ul>               </div>              <p></p><hr/>                <div id="divFAQAnswers" class="cPagesText">                 <a class="cQuestion" id="aQ1b">Q1</a><br/>                  <div id="divAns1">                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>                   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>                   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>                   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>                   </div>                  <a class="cQuestion" name="aQ2b" id="aQ2b">Q2</a><br/>                  <div id="divAns2">                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>                   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>                   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>                   </div>                  <a class="cQuestion" name="aQ3b" id="aQ3b">Q3</a><br/>                  <div id="divAns3">                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>                   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>                   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>                   </div>                  <a class="cQuestion" name="aQ4b" id="aQ4b">Q4</a><br/>                  <div id="divAns4">                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>                   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>                   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>                   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>                   </div>              </div>          </div>      </div>              </body></html>

CSS：

@charset "utf-8";

#divScreen {
    position: absolute;
    left: 0%;
    top: 0%;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: #bbbbbb;
    visibility: visible;
}

.cCommonDivs {
    position: absolute;
    left: 10%;
    top: 100px;
    width: 80%;
    overflow: auto;
    background-color: #4D7094;
    border: 3px solid #D5E5FF;
    border-color: #000000;  
    padding: 10px;
    font-family: verdana,helvetica,arial,sans-serif;
    font-size: 10pt;
    font-weight: bold;
    color: #FFFFFF;
    cursor: default;
    margin-left: -20px;
}

.cBigLinks a {
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 12pt;
    font-weight: bold;
    color: #000000;
    text-decoration: none;
}

.cBigLinks a:hover {
    color: #FFFF00;
}

.cPagesTitle {
    font-family: Verdana, Helvetica, Arial, sans-serif;
    font-size: 20pt;
    font-weight: normal;
    color: #FFFF00;
}

.cPagesText {
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 12pt;
    font-weight: normal;
    color: #FFFFFF;
}

.cQuestion {
    font-family: Verdana, Helvetica, Arial, sans-serif;
    font-size: 12pt;    
    font-weight: bold;
    color: #000000;
}
4

1 回答 1

0

后退按钮根本不旨在恢复到可滚动 div 中同一文件中的旧位置。

如果您想点击链接并让后退按钮将您带到旧位置，您有两种解决方案：

  • 链接到不同的页面并使用 javascript 滚动 div（基于 URL 参数）

  • 更难（尤其是维护）但有趣：使用历史 API 操作浏览器历史记录（参见https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history）。此解决方案通常用于动态加载某些内容的 ajax 应用程序。请小心，因为您会遇到浏览器兼容性限制。

于 2012-05-03T11:54:02.040 回答