Question

我已经命名了锚点并且他们正确地带我，但是当我按下浏览器的后退按钮时它不会将我带到屏幕顶部。我已经将问题缩小为css溢出：自动在#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;
}

Answer 1

后退按钮的设计并不是为了在可滚动的div中恢复到同一文件中的旧位置。

如果您想关注一个链接并让后退按钮将您带到旧位置，您有两个解决方案：

链接到其他网页并使用javascript滚动div（基于网址参数）
更难（尤其是维护）但很有趣：使用历史记录API操纵浏览器历史记录（请参阅https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history）。通常为ajax应用程序选择此解决方案，其中某些内容是动态加载的。请注意，因为您会遇到浏览器兼容性限制。

浏览器后退按钮对溢出中的命名锚点无效：可见div

1 个答案: