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

我有以下脚本为缩略图图像查看器。我已经分别以thumb和large命名了每个缩略图图像和较大的父图像。该脚本通过更改文件路径来替换大图像，同时单击任何缩略图图像。防止jquery浏览器滚动到顶部点击

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

每次单击缩略图时，页面会滚动回顶端。我试图防止这与

return false;

它的工作，但是，然后，大图像将不会更新。是否有另一种方法来防止页面滚动到顶部？

感谢您的帮助。

来源

2012-07-16 chasemb

的页面不滚动到页面的顶部，它滚动到大图像的顶部，因为你改变形象资源。

您可以尝试禁用并隐藏和淡入效果，并查看问题是否仍然存在。

如果问题仍然存在，只需添加解决问题的以下代码即可。

<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>

对不起任何英文错误。我在用谷歌翻译。

来源

2012-07-16 18:22:10

太棒了！谢谢！完美工作。 – chasemb 2012-07-16 18:31:00

你究竟在哪里放置了返回错误？如果你在最后做到了，它应该已经奏效了。就像这样：

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

您还可以使用e.preventDefault（）停止默认链接动作：

<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>

来源

2012-07-16 18:10:06 ryanulit

我似乎并没有做，在IE9。尽量防止默认动作：

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

来源

2012-07-16 18:10:08 ShaneBlake

我正在使用chrome。我也尝试过，但没有奏效。我使用了Victor的解决方案，它的工作非常完美。 – chasemb 2012-07-16 18:30:26

这是因为当您更换大图片src，它自败了片刻，页面变得越来越小并且不再需要滚动，以便上去。尝试缩放页面，然后你会看到它没有发生（Ctrl +鼠标向上滚动）。

只要把你带补丁大小DIV不改变大的图像：

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

来源

2012-07-16 18:16:33

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

回答

相关问题