jQuery jump to element

Question

I've something like an image gallery on my site. By clicking an image this one will scale up. Sometimes the enlargement contains that a part of the image is out of the viewport. Is it possible that the complete site jumps to the top area of the image by clicking it?

You can have a look here!

score 3 · Accepted Answer · edited May 23 '17 at 12:24

Try this:

$("div.image img").click(function() {
    $('html, body').animate({
        scrollTop: $(this).offset().top
    }, 2000);
});

It should create a click event for all the images inside the div element with a class "image", which I can see in your code, and then animate (slowly, in 2000 miliseconds, aka 2 seconds) scroll to it's offset from the top of the page.

You have more information in this 5 year old question on stackoverflow.com

edit: if you need some adjustment, you can edit this line

        scrollTop: $(this).offset().top - 88

and the page will scroll 88px less than the image position, which you could find helpful because of your floating menu.

jQuery jump to element

1 Answers1