Question

单击锚链接时是否可以更改屏幕位置？默认情况下，当单击锚链接时，它会移动屏幕，使锚点位于屏幕的最顶部。我希望它能够转移，但我不想将它一直移到屏幕顶部，我希望从顶部有一些空间，也许从顶部开始说是50px。

示例：

<a href="#section1">section 1</a>
<a href="#section2">section 2</a>

....
....

<div id="text">
    <div id="section1">text text text</div>
    <div id="section2">text text text</div>
</div>

感谢。

Answer 1

不需要JavaScript。这将做你想要的我怀疑。

此解决方案允许您将锚点放置在您希望屏幕滚动到偏离类adjusted-anchor的CSS规则中指定的锚点的位置。

<style>

  .anchor-container {
     position:relative;
  }

  .adjusted-anchor {
     position:absolute;
     top: -150px;
  }

</style>

<a href="#anchor">CONTINUED BELOW</a>

...


<div class="anchor-container"><div name="anchor" class="adjusted-anchor"></div></div>
<div>...continued from above</div>

偏移量是固定的，因此如果您的内容在调整屏幕大小时重新流动，则必须使用百分比或JavaScript来响应浏览器调整大小。

Answer 2

使用纯HTML无法实现这一目标 - 您将在不同的浏览器中获得不同的结果。

查看javascript的window.scrollTo（）

Answer 3

纯CSS选项，不添加任何额外元素：

a.shifted-anchor {
  display: block;
  position: relative;
  top: -100px;
}

<a name="something" class="shifted-anchor"></a>

Answer 4

另一个选择是：

<style>
div.shifted {padding-top: 70px; margin-top: -70px;}
</style>

<div class="shifted" id="section1">text</div>

如果您在页面顶部有一个绝对定位的菜单，弄乱了锚点位置，那么这也可以使用。如果菜单的高度为70px，则上述代码将使锚点显示在菜单下方的div处。

Answer 5

如果您需要将所有锚点放在页面下方：

a[id] {
     padding-top: 170px;
     margin-top: -170px;
}

玩得开心！

锚链接屏幕移位

5 个答案: