Skip to content

JavaSrcipt - Smooth scrolling tutorial

The previous post for most of you belongs to the "news from the margin" domain, for me it is one of the possibilities that works very well. But now I will deal with another tangible topic, and it is related to JavaScript. As I mentioned, JavaScript is a new area for me, but it occupied almost all of my attention in a short time. Wanting to become a better programmer, and as I walk the path of a Web developer, I realized that knowing Frontendand Backend Backendwas essential

This text is a short tutorial for one widespread feature of Web pages smooth scrolling (енг. Smooth scrollingThis effect itself, which is "embedded" in today's Web pages, is very pleasant and looks professionally, and on the other hand, it is easy to make. You need to know CSS (енг. CSS)because the JavaScipt code calls the classes assigned to the elements that control this effect. What are these elements? An element that contains the entire navigation( .main-navigation class), so called navigation container and each individual navigation item (.menu-item class).

The code

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" });
    }
  });
}

Line by line explanation

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

With this "if" structure, I have achieved that the scrolling effect is executed only on the home page (because only the home page contains the "home" css class). So, if the condition is correct (the document body contains the class "home", the effect of smooth scrolling will be active.

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

We focus on the ".main-navigation" class, which is the navigation container of the home page, and we listen to the "click" event on its elements. As soon as a click event occurs, the code from the function is executed.

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

When a click event occurs within the navigation (explained in the previous step) we come to the next if structure where we examine whether the click event occurred in one of the navigation elements. If a click event occurred on one of the navigation elements, the code from the body of the if structure is executed.

e.preventDefault();

This line disables the default behavior, and in this case, clicking on the link disables opening of a new page.

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

Variable id We assign the value of the href link attribute (the element over which the click event occurred) to the variable id. This attribute is associated with one of the sections on the page, and each section has a corresponding menu item.

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

This final line of code allows you to scroll smoothly to the selected section on the page. The scrollIntoView method is assigned an object with abehavior" property that has a "smooth" value. This property can also have an "auto" value which, if not explicitly specified as a parameter, is the default.

en_USEnglish
Powered by TranslatePress »