вопрос
Не могу настроить плавный скроллинг по якорным ссылкам так, чтобы фиксированное верхнее меню не закрывало заголовок.
При включенном скроллинге в Firefox работает нормально, в Opera и Chrome нет, закрывает заголовок.
При выключенном скроллинге в Opera и Chrome работает нормально, а в Firefox нет, закрывает заголовок.
Блок навигации:
Якорные ссылки:
Скроллинг:
CSS:
При включенном скроллинге в Firefox работает нормально, в Opera и Chrome нет, закрывает заголовок.
При выключенном скроллинге в Opera и Chrome работает нормально, а в Firefox нет, закрывает заголовок.
Блок навигации:
<li><a href="#header1" rel="nofollow">Заголовок 1</a></li>
<li><a href="#header2" rel="nofollow">Заголовок 2</a></li>
<li><a href="#header3" rel="nofollow">Заголовок 3</a></li>
Якорные ссылки:
<a id="header1"></a>
<a id="header2"></a>
<a id="header3"></a>
Скроллинг:
<script type="text/javascript">
$(function(){
$('a[href^="#"]').click(function(){
var target = $(this).attr('href');
$('html, body').animate({scrollTop: $(target).offset().top}, 800);
return false;
});
});
</script>
CSS:
#header1:before, #header2:before, #header3:before {
display: block;
content: "";
height: 70px;
margin: -70px 0 0;
}
@-moz-document url-prefix() {
#header1, #header2,
#header3 {
padding-top: 55px;
margin-top: -55px;
-webkit-background-clip: content-box;
background-clip: content-box;
}
}