Html and Css & Jsآموزش

اسکرول نرم به المنت‌ها با متد scrollIntoView

یکی از زیباترین افکت‌هایی که می‌تونی به سایتت اضافه کنی، اسکرول نرم هست. وقتی کاربر روی یه لینک کلیک می‌کنه، صفحه به جای پرش ناگهانی، به‌صورت نرم و روان به المنت مورد نظر اسکرول می‌شه. بیا ببینیم چطور این کار رو انجام بدیم.
؛ 🎯 scrollIntoView چیه؟ scrollIntoView یک متد در JavaScript هست که المنت مورد نظر رو در ناحیه قابل مشاهده مرورگر قرار می‌ده. این متد از قدیمای Web API هست ولی با گزینه behavior: 'smooth' قابلیت اسکرول نرم بهش اضافه شده.

JS:

const links = document.querySelectorAll('.link');

links.forEach((item) => {
 item.addEventListener('click', (e) => {
  e.preventDefault();

  let id = item.getAttribute('href');
  let formattierID = id.substring(1);
  let section = document.getElementById(formattierID);

  section.scrollIntoView({
   behavior: 'smooth',
  });
 });
});