Технический сбой

Сайт временно работает в режиме только для чтения, идут восстановительные работы. Приносим свои извинения за неудобства.
DLE FAQ » Все вопросы » Общие вопросы » Как настроить якоря, скроллинг и фиксированное меню?

Как настроить якоря, скроллинг и фиксированное меню?


     якорь, скроллинг, меню    Общие вопросы, Общие вопросы по вёрстке, Стили (CSS), jQuery    1565

вопрос
Не могу настроить плавный скроллинг по якорным ссылкам так, чтобы фиксированное верхнее меню не закрывало заголовок.

При включенном скроллинге в 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;
}

Ответил: dim


@-moz-document url-prefix() {
#header1, #header2, 
#header3 {
    padding-top: 55px;
    margin-top: -55px;
    -webkit-background-clip: content-box;
    background-clip: content-box;
}
}

2 комментария

BRAGA
Юзер

BRAGA - -

Что за margin-top: -70px?
Чтобы не закрывало заголовок как минимум нужно это убрать и лучше использовать padding и box-sizing: border-box

dim
Юзер

dim - -

Спасибо, неактуально.
От плавного скроллинга решил отказаться.
Проблему с Firefox решил добавлением CSS-правила конкретно для Mozilla.

Похожие вопросы

наверх