使锚链接在其链接的上方的某些像素处

Question

我不确定询问/搜索此问题的最佳方式:

当您单击锚链接时,它会将您带到页面的该部分,其中链接区域现在位于页面的顶部.我想锚链接把我发送到页面的那一部分,但我想在顶部有一些空间.就像在,我不希望它发送给我在非常顶部的链接部分,我想在那里有100个左右像素的空间.

这有意义吗？这可能吗？

编辑显示代码 - 它只是一个锚标记:

<a href="#anchor">Click me!</a>

<p id="anchor">I should be 100px below where I currently am!</p>

Answer 1

window.addEventListener("hashchange", function () {
    window.scrollTo(window.scrollX, window.scrollY - 100);
});

这将允许浏览器为我们跳转到锚点的工作,然后我们将使用该位置来抵消.

编辑1:

正如@erb所指出的那样,只有在更改哈希值的同时在页面上才有效.输入#something已包含在URL中的页面不适用于上述代码.这是另一个处理它的版本:

// The function actually applying the offset
function offsetAnchor() {
    if(location.hash.length !== 0) {
        window.scrollTo(window.scrollX, window.scrollY - 100);
    }
}

// This will capture hash changes while on the page
window.addEventListener("hashchange", offsetAnchor);

// This is here so that when you enter the page with a hash,
// it can provide the offset in that case too. Having a timeout
// seems necessary to allow the browser to jump to the anchor first.
window.setTimeout(offsetAnchor, 1); // The delay of 1 is arbitrary and may not always work right (although it did in my testing).

注:要使用jQuery,你可以只更换window.addEventListener用$(window).on的例子.谢谢@Neon.

编辑2:

正如少数人所指出的,如果你连续两次或多次点击相同的锚链接,上述情况将会失败,因为没有hashchange强制偏移的事件.

这个解决方案是@Mave建议的略微修改版本,并使用jQuery选择器来简化

// The function actually applying the offset
function offsetAnchor() {
  if (location.hash.length !== 0) {
    window.scrollTo(window.scrollX, window.scrollY - 100);
  }
}

// Captures click events of all <a> elements with href starting with #
$(document).on('click', 'a[href^="#"]', function(event) {
  // Click events are captured before hashchanges. Timeout
  // causes offsetAnchor to be called after the page jump.
  window.setTimeout(function() {
    offsetAnchor();
  }, 0);
});

// Set the offset when entering page with hash present in the url
window.setTimeout(offsetAnchor, 0);

这个例子的JSFiddle就在这里

Answer 2

只使用css,你可以为锚定元素添加填充(如上面的解决方案)为了避免不必要的空格,你可以添加相同高度的负边距:

#anchor {
    padding-top: 50px;
    margin-top: -50px;
}

我不确定这在任何情况下是否是最佳解决方案,但它对我来说效果很好.

Answer 3

这是 2020 年的答案：

#anchor {
  scroll-margin-top: 100px;
}

因为它得到了广泛的支持！

Answer 4

更好的解决方案:

<p style="position:relative;">
    <a name="anchor" style="position:absolute; top:-100px;"></a>
    I should be 100px below where I currently am!
</p>

只需将<a>标记定位在相对定位的对象内部即可.

进入页面或通过页面内的哈希更改时工作.

Answer 5

最佳方案

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

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

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

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

Answer 6

这个纯 CSS 解决方案适合我。

:target:before {
content:"";
display:block;
height:90px; /* fixed header height*/
margin:-90px 0 0; /* negative fixed header height */
}

我在这里找到它 - > https://www.wikitechy.com/tutorials/javascript/offsetting-an-html-anchor-to-adjust-for-fixed-header

这是一个小提琴： https: //jsfiddle.net/e8o2p3az/

Answer 7

这将在没有jQuery和页面加载的情况下工作.

(function() {
    if (document.location.hash) {
        setTimeout(function() {
            window.scrollTo(window.scrollX, window.scrollY - 100);
        }, 10);
    }
})();

Answer 8

试试这个代码，点击链接时它已经有一个平滑的动画。

$(document).on('click', 'a[href^="#"]', function (event) {
    event.preventDefault();

    $('html, body').animate({
        scrollTop: $($.attr(this, 'href')).offset().top - 100
    }, 500);
});

Answer 9

This should work:

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

        var target = this.hash,
            $target = $(target);

       $('html, body').stop().animate({
        'scrollTop': $target.offset().top-49
    }, 900, 'swing', function () {
    });

        console.log(window.location);

        return false;
    });
});

Just change the .top-49 to what fits with your anchor link.