Как сохранить якорные ссылки при плавном скролле?
У меня есть якорные ссылки в меню, но когда я прописываю плавный скролл с помощью scrollIntoView({ behavior: 'smooth' }), то я теряю якорную ссылку в URL. Несмотря на то, что я не делаю e.preventDefault(), плавный скролл происходит, однако пропадает ссылка на якорь в URL. Т.о. я не смогу кинуть кому-то ссылку на необходимый блок на странице. Как это исправить?
Дополнительно:
попробуйте вместо js прописать scroll-behavior: smooth; в css
scroll-behavior: smooth;
}
Не подходит в моём случае.
Или как вариант.я
Код взаимствован с другого источника.
1.При клике на якорную ссылку, добавьте обработчик события, который предотвращает переход по ссылке по умолчанию (чтобы не прервать плавный скролл).
2.Когда происходит плавный скролл и достигается цель, history.pushState() используется для обновления URL с якорем.
document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function (e) { e.preventDefault(); // Получите якорь из href атрибута ссылки const target = document.querySelector(this.getAttribute('href')); // Плавно прокрутите до цели target.scrollIntoView({ behavior: 'smooth' }); // Обновите URL с якорем history.pushState({}, '', this.getAttribute('href')); }); }); |
document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function (e) { e.preventDefault(); // Получите якорь из href атрибута ссылки const target = document.querySelector(this.getAttribute('href')); // Плавно прокрутите до цели target.scrollIntoView({ behavior: 'smooth' }); // Обновите URL с якорем history.pushState({}, '', this.getAttribute('href')); }); });
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для сохранения якорных ссылок при плавном скролле необходимо использовать JavaScript. Вот пример кода, который позволит вам реализовать данную функциональность:
// Функция для плавного скролла к элементу с якорной ссылкой function smoothScroll(target) { var targetElement = document.querySelector(target); var targetPosition = targetElement.offsetTop; var startPosition = window.pageYOffset; var distance = targetPosition - startPosition; var duration = 1000; // Время анимации в миллисекундах var start = null; window.requestAnimationFrame(step); function step(timestamp) { if (!start) start = timestamp; var progress = timestamp - start; window.scrollTo(0, easeInOutCubic(progress, startPosition, distance, duration)); if (progress < duration) window.requestAnimationFrame(step); } } // Функция для расчета плавности скролла function easeInOutCubic(t, b, c, d) { t /= d / 2; if (t { anchor.addEventListener('click', function(e) { e.preventDefault(); smoothScroll(this.getAttribute('href')); }); });
Приведенный выше код будет плавно скроллить к элементу на странице, на который указывает якорная ссылка при ее клике. Вы можете настроить параметры скорости анимации и другие свойства по своему усмотрению.
Не забудьте добавить этот код в ваш HTML файл и проверить его работоспособность. Надеюсь, этот ответ поможет вам решить вашу проблему с сохранением якорных ссылок при плавном скролле.