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

【问题标题】：Center on anchored image after jump?跳跃后以锚定图像为中心？
【发布时间】：2010-12-22 06:57:14
【问题描述】：

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

感谢您的帮助，

罗伯特 C.

【问题讨论】：

您可以使用 pastebin 之类的服务来粘贴代码
cslack.com/test.html
你想达到什么效果？
当您在上面的链接页面上单击“开始”时。我希望图片位于中间而不是右侧。
是的，但效果是否要求所有图像都在一个大页面上？当有人使用非常大的查看窗口，或者将他们的浏览器设置为以 10% 的缩放比例查看页面时会发生什么？从用户的角度来看，单击链接和转到另一个以图形为中心的页面有什么区别？将所有图像放在一个大页面上并将它们分开可能有一个很好的理由。

标签： css css-position centering

【解决方案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 元素偏移量进行一些数学运算，并将其滚动到中心。

【讨论】：

感谢您的快速回复。 JS解决方案是我可以在网上找到的吗？我是新手，所以暂时编写 javascript 可能超出我的能力范围。
嘿@Robert，我想我可以帮忙，但首先要问两个问题。你能发布一个你到目前为止所拥有的链接吗？ #2 你反对在页面上使用 jQuery (56k) 吗？
Doh...没有看到上面的链接，好的，所以回答问题#2 :)
我绝对不反对jQuery，大小不会是问题，麻烦的是，我基本上是初学者，学习曲线可能有点陡峭。
哇，dcneiner，非常感谢！超越使命召唤。这是完美的，因为我不需要这个项目的后退按钮。我现在必须上床睡觉，但我迫不及待地学习并尝试代码。再次感谢。一旦我得到一些值得分享的知识，我一定会转达。