1

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

谢谢你的帮助，

罗伯特·C。

4

1 回答 1

0

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

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

这是使用 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，并将其滚动到中心。

于 2009-12-02T04:53:55.280 回答