Question

我想知道如何覆盖HASH url行为。现在，当我使用＃comment122时，我会在我的页面中对122进行评论，但它会将＃comment122置于最高位置，li的一半未显示。这是一个例子：

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

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

Answer 1

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

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

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

var scroll_height = scroll_height - 300;

以上将滚动设置为元素上方300px。

最后，滚动页面。

window.scrollBy(0, scroll_height);

此解决方案使用jQuery：）

Answer 2

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

假设你正在使用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的哈希值上的元素。但我会把它留给你。

Answer 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>

HTML哈希网址锚点在页面中居中

3 个答案:

2021 方法