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

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


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

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

При включенном скроллинге в 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 - 21 марта 2018 23:20 -

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

dim
Юзер

dim - 22 марта 2018 12:14 -

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

Чтобы комментировать - войдите или зарегистрируйтесь на сайте

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

наверх