当前位置：文江博客话题详情

HTML：创建一个链接到位于页面中间居中的锚点

发布于 2024-08-04 19:58:08 字数 78 浏览 5 评论 0原文

我的 html 页面上有一个锚链接。单击链接时，它会导致页面滚动到锚点，以便锚点位于页面可见部分的最顶部。如何使页面滚动以使锚点位于页面中间？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

疯狂的代价 2024-08-11 19:58:09

我找到了 Phillip 发布的解决方案带有固定标题的锚链接，他是一名网页设计师。菲利普添加了一个新的空跨度作为锚位置。

<span class="anchor" id="section1"></span>
<div class="section"></div>

然后输入以下CSS代码

.anchor{
  display: block;
  height: 115px; /*same height as header*/
  margin-top: -115px; /*same height as header*/
  visibility: hidden;
}

谢谢，Phillip！

I found a solution Anchor Links With A Fixed Header posted by Phillip, he is a web designer. Phillip added a new EMPTY span as the anchor position.

<span class="anchor" id="section1"></span>
<div class="section"></div>

then put the following css code

.anchor{
  display: block;
  height: 115px; /*same height as header*/
  margin-top: -115px; /*same height as header*/
  visibility: hidden;
}

Thanks, Phillip!

回复收藏 0 原文

披肩女神 2024-08-11 19:58:09

放置一个然后设置 anchor 类的样式，如下所示

.anchor {
  position: absolute;
  transform: translateY(-50vh);
}

： w3schools.com/cssref/css_units.asp" rel="noreferrer">-50vh 锚点将在屏幕中间滚动。

Place a <span class="anchor" id="X"> then style the anchor class like:

.anchor {
  position: absolute;
  transform: translateY(-50vh);
}

With -50vh the anchor will scroll in the middle of the screen.

回复收藏 0 原文

呆头 2024-08-11 19:58:09

html:

<a id="anchor">NEWS</a>

css:

#anchor{
position: relative;
padding-top: 100px; //(whatever distance from the top of the page you want)
}

对我来说效果很好

html:

<a id="anchor">NEWS</a>

css:

#anchor{
position: relative;
padding-top: 100px; //(whatever distance from the top of the page you want)
}

worked fine for me

回复收藏 0 原文

删除→记忆 2024-08-11 19:58:09

在纯 html\css 中没有直接的方法可以做到这一点。尽管使用js，通过获取元素的顶部位置并将页面的顶部位置设置为该元素的位置减去页面高度的一半是可能的。

回复收藏 0 原文

长亭外，古道边 2024-08-11 19:58:09

如果你想要没有空格，请像这样：

但是，你仍然需要通过 javascript 来调节高度

回复收藏 0 原文

暮色兮凉城 2024-08-11 19:58:09

扩展 charles.cc.hsu 的答案，我们可以使用 vh< 对任意高度的元素执行此操作/code> CSS 单位，相对于视口的高度。

HTML:

<span class="anchor" id="section1"></span>
<div class="section"></div>

CSS:

.anchor{
    display: block;
    height: 50vh; /* 50% viewport height */
    margin-top: -50vh;
    visibility: hidden;
}

vh 在 IE9 及更高版本中受支持，因此使用起来非常安全。

Extending off of charles.cc.hsu's answer, we can do this for elements of arbitrary height using the vh CSS unit, which is relative to the viewport's height.

HTML:

<span class="anchor" id="section1"></span>
<div class="section"></div>

CSS:

.anchor{
    display: block;
    height: 50vh; /* 50% viewport height */
    margin-top: -50vh;
    visibility: hidden;
}

vh is supported in in IE9 and up, so it's pretty safe to use.

回复收藏 0 原文

假装不在乎 2024-08-11 19:58:09

确定您实际想要将页面的哪一部分放在顶部，然后将锚点放在那里。您将无法更改浏览器解释锚点的方式 - 至少不能在不打扰您的用户的情况下。

回复收藏 0 原文

ぇ气 2024-08-11 19:58:09

由于“页面中间”在任何给定时间都相对于用户屏幕和窗口的大小，因此您将必须使用 Javascript 来实现此目的，因为纯 HTML/CSS 中无法获得垂直屏幕宽度。

回复收藏 0 原文

忆沫 2024-08-11 19:58:09

$(window).on("load", function () {
    var urlHash = window.location.href.split("#")[1];
    if (urlHash &&  $('#' + urlHash).length )
          $('html,body').animate({
              scrollTop: $('#' + urlHash).offset().top-100
          }, 1000);
});

$(window).on("load", function () {
    var urlHash = window.location.href.split("#")[1];
    if (urlHash &&  $('#' + urlHash).length )
          $('html,body').animate({
              scrollTop: $('#' + urlHash).offset().top-100
          }, 1000);
});

回复收藏 0 原文

方觉久 2024-08-11 19:58:09

我会尝试在目标锚标记上放置等于页面高度一半的负边距（或其他定位方法）。

回复收藏 0 原文

好菇凉咱不稀罕他 2024-08-11 19:58:09

Firefox 支持在指定锚点上设置 padding-top 属性。从那里，您可以通过 javascript 设置一个包含浏览器尺寸的 cookie，并相应地在服务器端调整您的 padding-top。对于最终用户来说，它看起来像是纯 html/css，但 noam 是正确的，因为需要一点点 JS 来获取浏览器的尺寸，因为它不会在没有一点强制的情况下为您提供此信息。

回复收藏 0 原文

~没有更多了~