如果我在HTML页面中有一个非滚动头,固定在顶部,有一个定义的高度:

是否有一种方法可以使用URL锚(#fragment部分)让浏览器滚动到页面中的某一点,但仍然尊重固定元素的高度,而不需要JavaScript的帮助?

http://example.com/#bar
WRONG (but the common behavior):         CORRECT:
+---------------------------------+      +---------------------------------+
| BAR///////////////////// header |      | //////////////////////// header |
+---------------------------------+      +---------------------------------+
| Here is the rest of the Text    |      | BAR                             |
| ...                             |      |                                 |
| ...                             |      | Here is the rest of the Text    |
| ...                             |      | ...                             |
+---------------------------------+      +---------------------------------+

当前回答

我已经很容易地使用CSS和HTML,使用上面提到的“锚:之前”方法。我认为它是最好的,因为它不会在你的divs之间产生大量的填充。

.anchor:before {
  content:"";
  display:block;
  height:60px; /* fixed header height*/
  margin:-60px 0 0; /* negative fixed header height */
}

这似乎并不适用于页面上的第一个div,但你可以通过添加填充到第一个div。

#anchor-one{padding-top: 60px;}

这里有一个工作小提琴:http://jsfiddle.net/FRpHE/24/

其他回答

使用jQuery的最小侵入性方法:

链接:

<a href="#my-anchor-1" class="anchor-link">Go To Anchor 1</a>

内容:

<h3 id="my-anchor-1">Here is Anchor 1</a>

脚本:

$(".anchor-link").click(function() {
    var headerHeight = 120;
    $('html, body').stop(true, true).animate({
        scrollTop: $(this.hash).offset().top - headerHeight
    }, 750);
    return false;
});

通过将锚链接类分配给链接,其他链接(如手风琴或制表符控件)的行为不会受到影响。

这个问题不需要javascript,但另一个更受欢迎的问题因为这个问题而关闭了,我无法回答。

我对上面列出的答案没有任何运气,最终使用了这个完美的解决方案……

在想要设置锚点的地方创建一个空白span。

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

并应用以下类:

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

这个解决方案将工作,即使部分有不同的颜色背景!我在这个环节找到了解决方案。

我使用这种方法:

/* add class="jumptarget" to all targets. */

.jumptarget::before {
  content:"";
  display:block;
  height:50px; /* fixed header height*/
  margin:-50px 0 0; /* negative fixed header height */
}

它在每个目标之前添加一个隐形元素。支持IE8+。

这里有更多的解决方案: http://nicolasgallagher.com/jump-links-and-viewport-positioning/

你可以用jQuery做到这一点:

var offset = $('.target').offset();
var scrollto = offset.top - 50; // fixed_top_bar_height = 50px
$('html, body').animate({scrollTop:scrollto}, 0);

我没有看到简单地使用:target作为一个选项列出。我发现

:目标{margin-top: -100px;padding-top: 100 px;}

似乎在提供的场景中工作。:target也兼容所有现代浏览器。https://caniuse.com/?search=%3Atarget