防止jQuery浏览器滚动到点击顶部

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

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>

Answer 2

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.

Answer 3

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>

Answer 4

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>