页面标题与页面锚点重叠问题的解决方法
P粉521748211
P粉521748211 2023-08-21 19:18:36
0
2
547
<p>如果我在HTML页面中有一个固定在顶部的非滚动标题,具有定义的高度:</p> <p>是否有一种方法可以使用URL锚点(<code>#fragment</code>部分)使浏览器滚动到页面中的某个特定位置,但仍然尊重固定元素的高度<strong>而无需使用JavaScript的帮助</strong>?</p> <pre class="brush:none;toolbar:false;">http://example.com/#bar </pre> <pre>错误(但是常见行为): 正确: +---------------------------------+ +---------------------------------+ | BAR///////////////////// header | | //////////////////////// header | +---------------------------------+ +---------------------------------+ | 这里是其余的文本 | | BAR | | ... | | | | ... | | 这里是其余的文本 | | ... | | ... | +---------------------------------+ +---------------------------------+ </pre> <p><br /></p>
P粉521748211
P粉521748211

全部回复(2)
P粉285587590

如果您不能或不想设置一个新的类,可以在CSS中为::before伪元素添加一个固定高度的:target伪类:

:target::before {
  content: "";
  display: block;
  height: 60px; /* 固定的标题高度 */
  margin: -60px 0 0; /* 负的固定标题高度 */
}

或者使用jQuery相对于:target滚动页面:

var offset = $(':target').offset();
var scrollto = offset.top - 60; // 减去固定的标题高度
$('html, body').animate({scrollTop:scrollto}, 0);
P粉986937457

我遇到了同样的问题。 我通过给锚点元素添加一个类,并将topbar的高度作为padding-top的值来解决了这个问题。

<h1><a class="anchor" name="barlink">Bar</a></h1>

我使用了以下的CSS:

.anchor { padding-top: 90px; }
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板