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

Question

我有以下用于缩略图查看器的脚本。 我已经分别命名了每个缩略图和大父图像（分别以thumb和large结尾）。 该脚本通过更改文件路径将大图像替换为单击的缩略图。

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

每次单击缩略图，页面都会滚动回到顶部。 我试图防止这种情况

return false;

它有效，但是，大图像将不会更新。 还有另一种方法可以防止页面滚动到顶部吗？

谢谢你的帮助。

Answer 1

我似乎没有在IE9中这样做。 尝试阻止默认操作：

<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

该页面不会滚动到页面顶部，而是会滚动到大图像的顶部，因为您更改了图像来源。

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

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

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

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

Answer 3

您将假货归到何处？ 如果您在最后完成了该操作，则它应该可以正常工作。 像这样：

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

Answer 4

发生这种情况的原因是，当您替换大图像src时，它消失了片刻，页面变小了，不需要滚动，因此向上滚动。 尝试缩放页面，然后您将看到它没有发生（Ctrl +鼠标向上滚动）。

只需将DIV放大后的图像大小固定不变即可：

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