Question

我有一个缩略图图像查看器的以下脚本。我已经将每个缩略图图像和大的父图像分别以拇指和大的结尾命名。该脚本通过更改文件路径来替换大图像，而无需点击任何缩略图。

<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

页面不会滚动到页面顶部，因为您更改了图像源，所以它会滚动到大图像的顶部。

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

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

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

单击时阻止jquery浏览器滚动到顶部

4 个答案: