Question

I have the following script for a thumbnail image viewer. I’ve named each thumbnail image and large parent image ending in thumb and large, respectively. The script replaces the large image with whatever thumbnail image is clicked on by changing the filepath.

<script>
$('.thumbs').delegate('img','click', function(){
    $('.large').attr('src',$(this).attr('src').replace('thumb','large'));
    $('.large').hide().fadeIn(500);
});
</script>

Each time a thumbnail is clicked, the page scrolls back to the top. I’ve tried to prevent this with

return false;

It works, however, then large image won’t update. Is there another way to prevent the page from scrolling to the top?

Thanks for your help.

Answer 1

The page does not scroll to the top of page, it scroll to the top of large image because you change the image source.

You can try to disable and hide and fadeIn effects and see if the problem persists.

If the problem persists simply add the following code that the issue is resolved.

<script>
$('.thumbs').delegate('img','click', function(){
    var y = window.pageYOffset;
    $('.large').attr('src',$(this).attr('src').replace('thumb','large'));
    $('.large').hide().fadeIn(500);
    window.scrollTo(0, y)
});
</script>

Sorry any english mistake. I’m using google translate.