Как сохранить якорные ссылки при плавном скролле?

Question

[Влад]

У меня есть якорные ссылки в меню, но когда я прописываю плавный скролл с помощью scrollIntoView({ behavior: 'smooth' }), то я теряю якорную ссылку в URL. Несмотря на то, что я не делаю e.preventDefault(), плавный скролл происходит, однако пропадает ссылка на якорь в URL. Т.о. я не смогу кинуть кому-то ссылку на необходимый блок на странице. Как это исправить?

Comments

[MrColdCoffee]

попробуйте вместо js прописать scroll-behavior: smooth; в css

[imko]

А зачем ты скриптом крутишь?

[Влад]

el {
scroll-behavior: smooth;
}

Не подходит в моём случае.

Answer 1

[Яков Карелин]

Или как вариант.я
Код взаимствован с другого источника.
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'));
  });
});