Question

我希望在我的页面加载时跳转到锚标记并将锚点对象置于窗口中心。我在页面加载时使用了一个简单的函数来转到锚点：

<body onload="goToAnchor();">

<script type="text/javascript">

function goToAnchor() {
window.location = "#center";
}

</script>

但是为了使锚点对象居中，我需要以某种方式偏移窗口的位置。对于另一个函数，我使用类似的东西来实现适当的偏移（对象的宽度是固定的1500px）：

var $offset_target = (1500 - $(window).width())/2;

这成功地确保了每次跳到锚点时，无论窗口大小如何，对象都在视口中居中。

有什么想法吗？

谢谢！

UPDATE / ANSWER

所以，我使用下面的两个回复来提出这个问题：

function goToAnchor() {
document.body.scrollLeft = document.documentElement.scrollLeft =       
document.getElementById('center').offsetLeft-
(Math.ceil((- 1500 + $(window).width()) / 2));

}

它可能不是最优雅的解决方案，但它可以完成工作！非常感谢您的回答！

如果有人有更好的方法，请告诉我们！

Answer 1

没有jQuery：

function goToAnchor() {
    document.body.scrollTop = document.documentElement.scrollTop =
        document.getElementById('center').offsetTop-window.innerHeight/2;
}

这在大多数情况下都能正常工作。如果#center位于position而不是static的元素中，则需要额外一点来计算正确的偏移量，否则它将按原样运行。

Answer 2

我不久前为一个网站做过这个，下面的代码使用用户窗口宽度并从静态对象的宽度中减去它，除以2并水平滚动到该位置，水平居中对象。

$(window).scrollLeft(Math.ceil((1500 - $(window).width()) / 2));

Answer 3

您根本不需要脚本，请使用CSS：

.centered {
  text-align: left;
  width: 500px;
  margin-left: auto;
  margin-right: auto;
}

IE需要处于标准模式才能工作（这意味着使用有效的DOCTYPE）。将两个边距设置为自动使它们具有相同的值。

这是一个以body元素为中心的完整示例：

<style type="text/css">
.centered {
  text-align: left;
  width: 500px;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid blue;
}
.panel1 {border: 1px solid red;height: 200px}
.panel2 {border: 1px solid green;height: 200px}
</style>

<body class="centered">
  <div class="panel1">
    <div class="panel2"></div>
  </div>
  <div class="panel1">
    <div class="panel2"></div>
  </div>
</body>

在页面加载时使用javascript将锚点对象居中

3 个答案: