JS Problems geeksforgeeks Exercises and Solutions for Beginners

How to Create Native Smooth Scrolling with JavaScript (or CSS) 📌[All Method]️

The step-by-step guide on this page will show you How to Create Native Smooth Scrolling with JavaScript (or CSS). By following this guide, you will be able to deal with these sorts of difficulties.
Question: What is the best solution for this problem? Answer: This blog code can help you solve errors How to Create Native Smooth Scrolling with JavaScript (or CSS). Question: What are the reasons for this code mistake and how can it be fixed? Answer: You can find a solution by following the advice in this blog.

A few days ago, I was rendering out a list in Vue that needed some smooth scrolling.

Naturally, I turned to a JavaScript solution, but lo and behold, CSS had me covered.

For simplicity’s sake, suppose we have a navbar that brings us to another section of a webpage.

<nav>
    <ul>
        <a href="#one"><li>One</li></a>
        <a href="#two"><li>Two</li></a>
        <a href="#three"><li>Three</li></a>
    </ul>
</nav>

We also have content to render out.

<div class="content">
    <div id="one"><h1>One</h1></div>
    <div id="two"><h1>Two</h1></div>
    <div id="three"><h1>Three</h1></div>
</div>

Smooth Scrolling using CSS

In order to demo smooth scrolling, we need to style each page accordingly:

.content div {
  width: 100%;
  height: 100vh;
  text-align: center;
}
nav {
  position: fixed;
}
#one {
  background: #fff;
}
#two {
  background: #e0e0e0;
}
#three {
  background: #fff;
}

The secret here is to add scroll-behavior: smooth; to the <html> element.

html {
  scroll-behavior: smooth;
}

This will give us a basic template for smooth scrolling pages using a navbar. We can also isolate smooth scrolling to different sections of the webpage. It just depends on where you put the scroll-behavior attribute.

Smooth Scrolling using JavaScript

We can also smooth scroll in JavaScript.

If we know the exact location of the element we want to scroll to, we can scroll to a specific section of the page by using window.scroll() and modifying top.

window.scroll({
  top: 4000,
  left: 0,
  behavior: "smooth",
});

If we know the offset from the current location, we can use window.scrollBy() and, once again, modify top.

window.scrollBy({
  top: 200,
  left: 0,
  behavior: "smooth",
});

I find myself mostly using this last option, where we scroll to a specific element with a combination of document.querySelector() and scrollIntoView().

document.querySelector("#one").scrollIntoView({
  behavior: "smooth",
});


Now you learned, How you can use & How to Create Native Smooth Scrolling with JavaScript (or CSS).
Now you can solve your code error in less than a minute.

Related Articles

Leave a Reply

Your email address will not be published.

Back to top button