Question

当我在宽（4000像素）页面上跳转到锚标记时，锚定的图像水平对齐到右边。我怎样才能让它与中心对齐？我尝试了几件事，但似乎都没有。由于我是新来的，我不允许发布代码，所以我希望我足够清楚。

感谢您的帮助，

Robert C.

Answer 1

问题出现是因为浏览器将进行最少量的滚动以使锚定元素进入视图。因此，如果它位于可视区域的右侧，当单击锚标记时，它将向右滚动足够远以显示整个元素。

如果这是一个选项，您可以使用javascript修复此行为。您将无法使用直接CSS #anchor点击它。

这是使用jQuery的“解决方案”。我在引号中有“解决方案”，因为它可能会引入比你想要的更多的问题。例如，如果没有进一步的JS，后退按钮将无法转到上一个链接。但是，如果给出示例代码，这确实会使项目居中。

只需将其添加到您在结束<head>标记之前链接的页面：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>  
<script type="text/javascript">
$(function(){
   $("a[href^=#]").click(function(e){
       var id      = $(this).attr('href').substr(1),
           $target = $('*[name=' + id + '] img'),
           $window = $(window),
           offset  = $target.offset();

       var left = offset.left - ($window.width() / 2) + ($target.width() / 2 );
       var top  = offset.top  - ($window.height() / 2) + ($target.height() / 2);


       $('html,body').scrollTop(top).scrollLeft( left);

       e.preventDefault(); // Keep the browser from trying
   });  
});
</script>

它会找到所有带有内部链接的a标记（href以#开头）。然后它找到具有该名称的目标，并获取子img标记。然后它获取img元素和window元素的维度。是否有一些img元素的数学偏移，并将其滚动到中心。

跳跃后以锚定图像为中心？

1 个答案: