HTML 哈希 url 锚点在页面中居中答案

【问题标题】：HTML hash url anchor to be centered in the pageHTML 哈希 url 锚点在页面中居中
【发布时间】：2021-03-17 09:37:43
【问题描述】：

我想知道如何覆盖 HASH url 行为。现在，当我使用#comment122 时，我会在我的页面中评论 122，但它会将 #comment122 置于非常高的顶部，并且一半的 li 没有显示。这是一个例子：

<ul>
  <li><a id="comment122">comment content</a></li>
  <li><a id="comment123">comment content</a></li>
</ul>

基本上，我想要实现的是每次访问哈希 url 时，我需要它再滚动几个像素，以便元素在页面中居中。有什么建议吗？

【问题讨论】：

能给个链接吗？
可能对你有用stackoverflow.com/questions/18468170/…

标签： html

【解决方案1】：

您需要为此使用 JavaScript。首先获取元素的 CSS top 属性

var scroll_object = $("#comment122").offset();
var scroll_height = scroll_object.top;

如果要将对象置于页面中间，则需要滚动页面小于对象的实际 top 属性值。

var scroll_height = scroll_height - 300;

以上内容会将滚动设置为元素上方 300 像素。

最后，滚动页面。

window.scrollBy(0, scroll_height);

此解决方案使用 jQuery :)

【讨论】：

【解决方案2】：

触发点击事件时，您需要获取目标元素的高度（假设您只是垂直滚动），将其从window.innerHeight 中减去，然后除以二。然后你需要从元素相对于窗口顶部的偏移量中减去它。这将为您提供精确数量的像素，以使元素在屏幕上垂直居中。

假设你使用的是 jQuery，这里有一个简单的例子：

$(document).on('click', 'li a', function(e) {
    e.preventDefault();

    var target = $($(this).attr('href'));

    $('html, body').animate({
        scrollTop: target.offset().top - parseInt((window.innerHeight - target.outerHeight()) / 2, 10)
    }, 300);
});

这是一个工作示例：http://jsfiddle.net/FJBXg/

可以使用相同的逻辑来拦截其 URL 上带有散列的加载页面，因此您可以将页面动画到 URL 散列上的元素。但我会把它留给你。

【讨论】：

【解决方案3】：

2021方法

以下是一种使用新网络功能的方法。它会阻止正常的链接动作并平滑滚动到中心位置。

您可能需要在不是超级新的浏览器上使用this polyfill。

document.querySelector('a[href^="#"]').addEventListener('click', (e) => {
  e.preventDefault()
  document
    .querySelector(e.currentTarget.getAttribute('href'))
    .scrollIntoView({
      behavior: 'smooth',
      block: 'center'
    })
})

.filler {
  /* CSS Pattern by Logan McBroom (http://logan.mcbroom.me/) */
  background: linear-gradient(63deg, #999 23%, transparent 23%) 7px 0, linear-gradient(63deg, transparent 74%, #999 78%), linear-gradient(63deg, transparent 34%, #999 38%, #999 58%, transparent 62%), #444;
  background-size: 16px 48px;
  height: 5000px;
}

<a id="firstlink" href="#thespot">Scroll <i>smooth</i> and centered.</a>
<br/><br/>
<a href="#thespot">Scroll classic <b>janky headbutt</b> style.</a>
<br/><br/>

<div class="filler"></div>

<p id="thespot">jump to me!</p>

<div class="filler"></div>

【讨论】：