Как сделать так, чтобы при переходе по якорной ссылке внутри страницы, цель оказывалась, по возможности, в центре вьюпорта?
Есть длинный список, в котором человек может по клику на кнопку найти себя. Я сделать это при помощи ссылки. Работает как надо, но позиция в списке, при переходе на нее, оказывается в самом верху экрана. Это не очень красиво выглядит.
Как сделать так, чтобы человек нажимает на ссылку и его откидывает по странице так, чтобы его позиция в списке была по центру экрана, на сколько возможно
Дополнительно:
scroll-margin?
если вам важен рейтинг тут, напишите в виде ответа, а не комментария и я смогу отметить ваш ответ решением
в общем добавил ответом
scroll-margin?
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для того чтобы при переходе по якорной ссылке внутри страницы цель оказывалась по возможности в центре вьюпорта, можно использовать небольшой скрипт на JavaScript.
Прежде всего, необходимо добавить класс к якорной ссылке, к которой мы хотим прокрутить страницу. Например, мы добавим класс "scroll-to" к ссылке:
<a href="#section1" class="scroll-to">Перейти к разделу 1</a>
Затем, добавим следующий скрипт на JavaScript, который будет обрабатывать клик по ссылке и прокручивать страницу к указанному якорю:
document.querySelectorAll('.scroll-to').forEach(anchor => { anchor.addEventListener('click', function(e) { e.preventDefault(); const targetId = this.getAttribute('href'); const targetElement = document.querySelector(targetId); if (targetElement) { const offsetTop = targetElement.offsetTop - window.innerHeight / 2; window.scrollTo({ top: offsetTop, behavior: 'smooth' }); } }); });
Этот скрипт будет искать все элементы с классом "scroll-to", добавлять к ним обработчик клика и при клике на ссылку будет плавно прокручивать страницу к указанному якорю, так чтобы цель оказывалась примерно в центре вьюпорта.
Таким образом, вы сможете реализовать функционал прокрутки к якорной ссылке с центрированием элемента на экране.