Smooth scroll to anchor links in Nuxt3 как сделать?

Question

[Алексей]

Добрый день, подскажите пожалуйста как сделать на Nuxt 3 js есть Smooth scroll to anchor links и чтобы id не добавлялся к строке в браузере. Заранее большое спасибо.

Answer 1

[Aetae]

Точно также как и не в nuxt.

function manualSmoothScroll(event) {
  // находим хэш ссылу по которой мы кликнули
  const id = event.target.closest('a[href^="#"]')?.hash;
  // если клик куда-то ещё - ничего не делаем
  if (!id) return;
  
  
  // находим цель куда будем скроллить по хэшу
  const target = document.querySelector(id);
  // если не нашли - ничего не делаем
  if (!target) return;
  
  // отменяем стандартный переход
  event.preventDefault();
  // едем руками
  target.scrollIntoView({ behavior: "smooth" });
}

// при загрузке
addEventListener('click', manualSmoothScroll, true);


// при выгрузке
removeEventListener('click', manualSmoothScroll, true);

// если действовать надо только в рамках элнметата
// elementRef.value.addEvent... elementRef.value.removeve... 
// или this.$refs.element... 
// или this.$el...

Comments

[Алексей]

Aetae спасибо большое.