2

单击锚链接时是否可以更改屏幕位置？默认情况下，当单击锚链接时，它会移动屏幕，使锚位于屏幕的最顶部。我希望它移动，但我不想一直移动到屏幕顶部，我希望顶部有一些空间，也许说距离顶部 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>

谢谢。

4

5 回答 5

4

JavaScript 不是必需的。这会做你想要的，我怀疑。

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

<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 来响应浏览器大小调整。

于 2013-03-21T17:47:32.413 回答
2

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

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

<a name="something" class="shifted-anchor"></a>
于 2016-12-17T04:38:07.127 回答
0

没有办法用纯 html 做到这一点 - 你会在不同的浏览器中得到不同的结果。

看看 javascript 的 window.scrollTo()

于 2013-02-27T21:36:24.600 回答
0

另一种选择是：

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

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

如果您在页面顶部有一个绝对定位菜单之类的东西，这也会使锚位置混乱。如果菜单是 70px 高，上面的代码将使锚点显示菜单正下方的 div。

于 2020-04-16T17:48:55.143 回答
0

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

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

玩得开心 ！

于 2021-02-01T03:57:31.733 回答