Как сделать переход к якорю, если шапка закрывает?

Question

[Илья]

Мне нужно сделать меню с ссылками на якоря. Но у меня не получается, потому что мешает фиксированная шапка. Например, страница прокручивается до блока с заголовком «До центра рукой подать», но шапка закрывает начало:
project2017.std-221.ist.mospolytech.ru/#place


Что сделать, чтобы при переходе к якорю стало следующим образом?


Наверное, можно задать блоку padding-top, но так придётся переделывать всю вёрстку. Может есть какой-то скрипт, благодаря которому при переходе к якорю страница будет недоезжать 75px?

Comments

[Ankhena]

Либо на JS (узнавать высоту прокрутки до якоря, прибавлять нужный зазор и задавать новую прокрутку. Погуглите что-нибудь типа "плавный скоролл к якорю на js" и адаптируйте под себя)
Либо переставить якоря выше.

Answer 1

[Анатолий]

Вот вам готовый скрипт на JQuery.

$(document).ready(function() {
	$("a.scrollto").click(function () {
		elementClick = $(this).attr("href")
		destination = $(elementClick).offset().top;
		$("html:not(:animated),body:not(:animated)").animate({scrollTop: destination - *высота шапки*}, 1100);
		return false;
	});
});

Для того, чтобы ссылка была "со скроллом" нужно добавить ей класс scrollto
Также не забудьте указать высоту шапки и время прокрутки (по умолчанию 1100мс)

Comments

[Сергей delphinpro]

$("html:not(:animated),body:not(:animated)").animate({scrollTop: destination - *высота шапки*}, 1100);
=>

$("html,body").stop().animate({scrollTop: destination - *высота шапки*}, 1100);

[Илья]

Анатолий, спасибо!

У меня заработало без подключения файла Джейквери. Так и должно быть?

[Анатолий]

Илья Сидорчик, Первое правило разработчика: работает - не трожь. А вообще, похоже у вас уже был подключен JQuery

[ilyasidorchik]

Анатолий, да, подключён, я же Less использую. Простите)

Answer 2

[Денис Васильев]

Нашел еще одно решение с помощью свойства `scroll-padding-top`, как я понял работает на Хромовском движке.
Статья
Пример

Answer 3

[Максим Тимофеев]

Делается это через js, средствами голого html без костылей не получится.
https://yandex.ru/search/?text=js%20scrollto&clid=...