ЈаваСкрипт – ефекат глатког помицања

Претходна објава за добар део вас спада у домен оних „са маргине“, за мене представља једну од могућности која функционише и то врло добро. Али сада бавићу се другом опипљивојом темом, а везана је за ЈаваСкрипт. Као што сам навео, ЈаваСкрипт је нова област за мене, али ми је за кратко време заокупила готово сву пажњу. Желећи да постанем бољи као програмер, а како се бавим развојем за Веб, схватио сам да је познавање фронтенда (енг. Frontend) и бекенда (енг. Backend) неопходно.

Овај текст представља кратки туторијал за једну широко распрострањену особину Веб сраница, глатко помицање (енг. Smooth scrolling). Сам овај ефекат који се „уграђује“ у данашње Веб странице јако је пријатан и делује професионално, а са друге стране једноставан је за реализацију. Потребно је познавати ЦСС (енг. CSS), јер се у коду позивају класе додељене елементима који контролишу овај ефекат. Који су то елементи? Елемент који садржи целокупну навигацију (класа .main-navigation) , тзв. контејнер навигације и сваку појединачну ставку навигације (класа .menu-item).

Код

if (document.body.classList.contains("home")) {
  document
  .querySelector(".main-navigation")
  .addEventListener("click", function (e) {
    // Matching strategy
    if (e.target.parentElement.classList.contains("menu-item")) {
      e.preventDefault();
      const id = e.target.getAttribute("href");
      document.querySelector(id).scrollIntoView({ behavior: "smooth" });
    }
  });
}

Објашњење – ред по ред

if (document.body.classList.contains("home")) 

Овом „иф“ структуром сам постигао да се ефекат помицања извршава само на насловној страни (јер само насловна страна садржи класу „home„). Дакле, уколико је услов тачан (тело документа садржи класу „home“, ефекат глатког помицања ће бити активан.

document
  .querySelector(".main-navigation")
  .addEventListener("click", function (e)

Фокусирамо се на класу „.main-navigation“ која представља оквир навигације насловне стране и ослушкујемо клик догађај на њеним елементима. Чим се деси клик догађај извршава се код из функције.

if (e.target.parentElement.classList.contains("menu-item"))

Када се деси клик догађај у оквиру навигације (објашњено у претходном кораку) долазимо до наредне иф структуре где испитујемо да ли се клик догађај десио у једном од елемената навигације. Уколико се клик догађај десио на једном од елемената навигације, извршава се код из тела иф структуре.

e.preventDefault();

Овај ред онемогућава подразумевано понашање, а што се конкретног случаја тиче, кликом на линк се онемогућава отварање нове странице.

const id = e.target.getAttribute("href");

Променљивој id додељујемо вредност атрибута href линка (елемента над којим се десио клик догађај). Овај атрибут је повезан са једном од секција на страници, а свака секција има одговарајућу ставку у изборнику.

document.querySelector(id).scrollIntoView({ behavior: "smooth" });

Овај завршни ред кода омогућава глатко помицање до изабране секције на страници. Метода scrollIntoView има додељен објекат са својством „behavior“ које има вредност „smooth„. Ово својство може да има и вредност „auto“ која се, ако није експлицитно наведено као параметар, подразумева.