Какие есть способы предотвращения прыжков контента при использовании прокрутки с якорями?

Несколько способов предотвратить прыжки контента при использовании прокрутки с якорями:

• Отменить стандартное действие при помощи JavaScript. sky.pro Для этого нужно использовать метод event.preventDefault(). sky.pro ru.stackoverflow.com
• Изменить атрибут href. sky.pro Например, заменить href=”#” на href=”#!” или href=”#/”. sky.pro В результате страница не будет проскроллена вверх. sky.pro
• Использовать кнопки. sky.pro Если элемент нужен не для перехода по ссылке, а для выполнения конкретного действия, лучше использовать элемент <button>, стилизованный под ссылку. sky.pro Это поможет исключить нежелательную прокрутку и не добавит новую запись в историю браузера. sky.pro
• Организовать плавную прокрутку. sky.pro Для этого можно использовать CSS-свойство scroll-behavior или метод scrollIntoView({behavior: 'smooth'}). sky.pro
• Добавить отступ прокрутки. www.dev-notes.ru Для этого нужно установить для якорного элемента страницы параметр scroll-margin-top. www.dev-notes.ru Например, h1 { scroll-margin-top: 40px; } создаст 40px пространства между верхней частью области просмотра и якорным элементом страницы. www.dev-notes.ru

Также в браузере Chrome можно включить функцию «Регулировка прокрутки» (Scroll Anchoring). lifehacker.ru Для этого нужно ввести в адресной строке команду chrome://flags/#enable-scroll-anchoring. lifehacker.ru

Пользователь

Время добавления