кнопка браузера не работает на именованном якоре при переполнении: visible div

Я назвал якоря, и они принимают меня правильно, однако, когда я нажимаю кнопку «Назад» браузера, она не принимает меня поверх экрана. Я сузил проблему до css-переполнения: auto в разделе C#divScreen css.кнопка браузера не работает на именованном якоре при переполнении: visible div

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

источник

2012-05-03 MIrrorMirror

Пожалуйста, разместите код, имеющий отношение к вопросу. В идеале ** в дополнение ** к коду в самом теле вопроса, пожалуйста, добавьте пример вашей проблемы [jsFiddle] (http://jsfiddle.net/api/post/jquery/1.7.1/). Это поможет нам помочь вам. –

Я действительно разместил код, относящийся к вопросу, это две ссылки в pastebin. Вот код jsfiddle: http://jsfiddle.net/5fh3W/ – MIrrorMirror

Если кто-нибудь случайно упадет завтра, никто не сможет ответить на ваш вопрос. Пожалуйста, вставьте соответствующий код ** в орган вопроса **. Кодовый блок отстутнут на 4 пробела (или выделив его и нажав CTRL + K). –

Кнопка назад просто не предназначен, чтобы вернуться к старым позициям в том же файле в прокручиваемом дел.

Если вы хотите перейти по ссылке и имеете обратную кнопку доводя вас до старой позиции, у вас есть два решения:

ссылка на другую страницу и использовать JavaScript для прокрутки DIV (на основе параметр URL)
сложнее (особенно для обслуживания), но интересно: управлять историей браузера с помощью API истории (см. https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history). Это решение обычно выбирается для приложений ajax, где некоторый контент динамически загружается. Будьте осторожны, так как вы столкнетесь с ограничениями совместимости с браузером.

источник

2012-05-03 11:54:02

dystroy, это неправда. кнопка «Назад» приведет вас к предыдущей позиции: http://en.wikipedia.org/wiki/Html перейдите туда и щелкните по любой из ссылок TOC, а затем нажмите кнопку «Назад». он доставит вас наверху страницы – MIrrorMirror

Вы правы. То, что я сказал, было правильным только для прокручиваемых div. –

Я вижу, это питти, и я бы не хотел использовать javascript для такой простой функции. Я увижу, могу ли я изменить структуру страницы, чтобы она работала без прокручиваемого div. спасибо – MIrrorMirror

кнопка браузера не работает на именованном якоре при переполнении: visible div

ответ

Смежные вопросы