Question

我正在尝试在html中执行操作，您单击链接并自动滚动到页面中的所需位置。这是代码的按钮/链接部分：

<li><a href="#Origins">Origins</a></li>

然后我将它链接到此代码所代表的页面的这一部分：

<h3 id="Origins">Origins</h3>

这完全正常，但是，我在顶部的页面标题是h1，设置为固定位置。因此，当您点击该链接时，它会走得太远，以至于顶部的标题覆盖了＆＃34;起源＆＃34; 页面的一部分。我尝试在起源的顶部添加填充，但有很多空白以上＆＃34;起源＆＃34;在我不想要的页面中。有没有人有任何想法？提前谢谢！

Answer 1

您可以使用Javascript（以下示例需要jQuery，但也可以通过Vanilla Javascript完成）滚动到h3的位置减去h1的高度：

$(function() {
  var h1Height = $('h1').height(); // get height of h1 tag
  $('li a').click(function (e) {
      e.preventDefault();
      var target = $(this.hash);
      $('html, body').animate({
          scrollTop: target.offset().top - h1Height // scroll to h3 minus height of h1
      }, 1000);
      return false;
  });
});

body,html {
  margin:0;
  padding:0;
}
h1{
  margin:0;
  padding:0;
  width:100%;
  background:#fff;
  position:fixed;
  top:0;
}
ul {
  margin:60px 0 0;
}
.space, h3 {
  margin:1000px 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Heading</h1>

<ul><li><a href="#Origins">Origins</a></li></ul>

<div class="space"></div>

<h3 id="Origins">Origins</h3>

Answer 2

我通常将锚放置在语义上正确的位置，为它提供相对位置，然后将其向上推抬头的高度加几个px。

Answer 3

scroll-margin-top 帮我解决了问题。

<h1>Heading</h1>

<ul><li><a href="#Origins">Origins</a></li></ul>

<div class="space"></div>

<h3 id="Origins" style="scroll-margin-top: 7em;">Origins</h3>

来源：https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin-top

偏移滚动到HTML？

3 个答案: