CODEWITHSUNDEEP
javascriptjquery
chasemb
chasemb

Reputation: 167

Prevent jquery browser scrolling to top on click

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.

Upvotes: 2

Views: 1416

Answers (4)

Grzegorz Kaczan
Grzegorz Kaczan

Reputation: 21676

This happens because when you replace large image src, for a moment it dissapears, page got smaller and scrolls are no needed so go up. Try zooming page and then you will see it doesnt happen(ctrl + mouse scroll up).

Just put you large image with DIV with fixes size that does not change:

<div style="height: 490px; width: 490px;float: left;">
    <img style="display: block;" class="large" src="images/06_large.png">
</div>

Upvotes: 1

Victor Santos
Victor Santos

Reputation: 350

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.

Upvotes: 2

ShaneBlake
ShaneBlake

Reputation: 11096

I doesn't seem to be doing that in IE9. Try preventing the default action :

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

Upvotes: 3

ryanulit
ryanulit

Reputation: 5001

Where exactly did you place the return false? If you did it at the end, it should have worked. Like this:

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

You can also use e.preventDefault() to stop the default link action: 

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

Upvotes: 1

Related Questions