1

我想知道如何覆盖 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 时，我需要它再滚动几个像素，以便元素在页面中居中。有什么建议吗？

4

3 回答 3

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 :)

于 2013-10-08T01:43:28.650 回答
1

触发点击事件时，您需要获取目标元素的高度（假设您只是垂直滚动），将其减去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 散列上的元素。但我会把它留给你。

于 2013-10-08T02:23:17.783 回答
1

2021方法

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

你可能需要在不是超级新的浏览器上使用这个 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>

于 2021-03-17T01:19:26.033 回答