Smooth Scrolling Compatible with All Browsers

On long web pages, I’ll show you how to add Smooth Scrolling to our pages when clicking on anchor links. Anchor links in HTML are written with the hash sign. These anchor links are used to reach another area within the page by clicking on a link within the page.

We will write them between the body tags. I start by typing in ul li tags. As an example, let’s do three link placements and place a tag inside each of them. The thing to note here is that it starts with the hash sign. Thus, it can perceive the points it will go to in this way. Now we’ll write a content in them, so the Scroll of the page will appear, we will have the opportunity to scroll.

I write lorem ipsum between the P tag Let’s not try to get texts from the other places. It may be working this way right now. But what we want is Smooth Scrolling, the smooth scrolling feature is for this to work. So there are some extra steps we will take. Normally Smooth Scrolling works nicely with CSS. However, while it works fine in Chrome and Firefox, problems may arise with other browsers. Therefore, I’ll show you the example that will work in all browsers.

Using Scroll Behavior with CSS

First of all, let me show you how to do these operations over style in Chrome and Firefox. I add the style codes to the page and at the scroll-behavior property to the body with smooth. We can write HTML instead of body. We can also use JavaScript if we want it to work compatible with other browsers and not have any problems.

html {
  scroll-behavior: smooth;
}

Using Smooth Scrolling with JavaScript

First, we need to import the jQuery file here. We need to call the jQuery file into our HTML page. I copied jQuery from JSdelivr and pasted it here. You can find the smooth scrolling code below. This code scrolls the page softly to the relevant area when a tags are clicked. In fact, the result is similar to CSS. However, as I said, if you want it to work in harmony with many browsers, you can use this feature. But no, if you want it to work fine only in Chrome and Firefox and I don’t want to write that. much code, you can use the previous method, the CSS method.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("a").on('click', function(event) {

    if (this.hash !== "") {
      event.preventDefault();
      var hash = this.hash;

      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 800, function(){
   
        window.location.hash = hash;
      });
    }
  });
});
</script>

You can also use this feature in single page designs. With this method you can link the page to the menus and ensure that the page scrolls nicely to the relevant areas.