Home » Javascript » Scroll link to another page's section smoothly

Scroll link to another page's section smoothly

Posted by: admin August 19, 2018 Leave a comment

Questions:

I have index.php which has different sections like top,service,aboutus andcontactus .I have my header.php in includes folder and I include it to each and every files separately.I added jquery for smooth scroll for sections.

Now I have gallery.php which has the same header.Now I want to call each and every section from gallery to index/section. So I changed the href="#service" to href=index.php#service.Now it works from both index and gallery pages.

Problem:
The smooth scroll on works if I call the section from index.php. When I call a section from gallery.php it just load the upper part of index.php and suddenly moves to the called section.I want it to move smoothly.How can I make it happen?

$(document).ready(function(){   
  $("a").on('click', function(event) {

    if (this.hash !== "") {
      // Prevent default anchor click behavior
      event.preventDefault();

      // Store hash
      var hash = this.hash;

      // Using jQuery's animate() method to add smooth page scroll
      // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 800, function(){

        // Add hash (#) to URL when done scrolling (default click behavior)
        window.location.hash = hash;
      });
    } // End if
  });
});
Answers: