1. Главная
  2. Блог
  3. Полезные статьи
  4. Как сделать скролл с отступом

Как сделать скролл с отступом

31 декабря 2021
4

Якоря используются чаще всего при создании лендингов – ссылки с якорями на блоки лендинга размещаются в главном меню сайта и в содержании статей.

Пример использования якорей:


	 Содержание
	 <a href="#oz001">Вступительное слово</a>
	 <a href="#yz004">Ключевые выводы</a>

	 ….

	 <h3 id="oz001">Вступительное слово</h3>

	 …

	 <h3 id="yz004" style="text-align: right;">Ключевые выводы</h3>

Ссылка для прокрутки к якорю выглядит как: Ваш-сайт.РФ/адрес-страницы/#oz001

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


Для решения этой проблемы есть несколько способов. Мы предложим наиболее простые, не требующие знаний JS.

Вариант 1. В файле css (для Wordpress это может быть файл style.css в корне активной темы), размещаем следующие строки:


	 #oz001:before, #yz004:before {
	               display: block;
	               content: "";
	               height: 150px;
	               margin: -150px 0 0;
	 }

150px, -150px – это цифры, которые подгоняются до приемлемого результата, якоря указываем свои между # и :before.

Вариант 2. Для Wordpress всё еще проще. Устанавливаем плагин Page scroll to id

В нем достаточно одной единственной настройки – высоты отступа:

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

Комментарии
Name
Email
Phone
Ваше имя
Ваш email
Оставить комментарий
Нажмите для звонка
Хотите заказать сайт?
Обращайтесь любым удобным способом и мы поможем подобрать интересный вариант для Вас!