0

I have a few images on a page and when someone clicks these images, it will load content from another page into a div container which is sitting at the top of page.

As the images are at the bottom, when the content is loaded into the container, users might not know. I would like to automatically scroll up to the top of the div container upon image click at the same time the content is being loaded or loaded.

Below is the code I am using the load content into the container. I can't seem to find any code to add on that would allow me to scroll up to the top when the content is loaded.

$(document).ready(function(){
    $('nav.main > a').click(function(e){
        e.preventDefault();
        $("#dynamic").load($(this).attr('href') + " .product_content").fadeIn('slow');
    });
});
Karthick Nagarajan
  • 1,335
  • 2
  • 14
  • 26
Cabon
  • 1
  • 2
  • Possible duplicate of [jQuery scroll to element](http://stackoverflow.com/questions/6677035/jquery-scroll-to-element) – Ziv Weissman May 20 '17 at 12:33
  • Possible duplicate of [JQuery : Load a file in modal window](http://stackoverflow.com/questions/44047030/jquery-load-a-file-in-modal-window) – Junius L. May 20 '17 at 12:38

1 Answers1

2

The load() function has an argument where you can input a callback. Please refer to the documentation.

$(document).ready(function(){
   $('nav.main > a').click(function(e){
    e.preventDefault();
    $("#dynamic").load($(this).attr('href') + " .product_content", ()=>{ window.scrollTo(0, 0) }).fadeIn('slow');
   });
 });

You can change the scrollTo() function to scroll any element you wish, eg $('element').scrollTo(0).

Monstrum
  • 88
  • 14