Warning: Attempt to read property "name" on null in /home/sanagrafi.com/public_html/wp-content/themes/sgtheme/single.php on line 3

Warning: Attempt to read property "term_id" on null in /home/sanagrafi.com/public_html/wp-content/themes/sgtheme/single.php on line 3

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.

Popular Tutorials

cPanel ile 1 Dakikada WordPress Kurulumu

Bu eğitimde Wordpress kurulumu yapacağız, ama Wordpress’i cPanel üzerinden kuracağız. Bir hosting…

CSS’te Pseudo Seçicileri Kullanımı (Sözde Sınıflar ve Elementler)

CSS’in bilmeniz gereken özelliklerinden biri Pseudo Classes (Pseudo Sözde Sınıfları) ve Pseudo…

Squarespace vs Wordpress for Blogging: Which One is Better?

If you’re thinking about starting a blog, you’re probably wondering which platform…

ScrollReveal ile Scroll Animasyonları

ScrollReveal, sayfanızı aşağı doğru kaydırdığınızda, sayfa içindeki elemanların hareketli bir şekilde yerine…

Portfolyo Sayfaları için JavaScript TypeWriter Efekti

Daha çok portfolyo veya ajans sitelerinde gördüğümüz tarzda bir daktilo yazım efekti…

Tüm Tarayıcılarla Uyumlu Smooth Scrolling

Ekrana sığmayan uzun web sayfalarında, anchor linklere tıklandığında Smooth Scrolling denilen yumuşak…