Question

我使用哈希引用滚动到我网站的特定部分，但它会滚动，以便哈希位于窗口的顶部，在我的导航栏下方。因此，哈希引用元素的标题是隐藏的，看起来不太好。

有没有办法给出一个上边距或类似于哈希引用的东西，以便它在正确的位置加载？

我尝试在div中添加换行符，但由于div上有背景颜色，它会将背景扩展到标题上方，看起来也很糟糕。

提前感谢您的帮助！

HTML：第1项

<div id="item1">
    <h4>item1 title</h4>
    <p>item1 content</p> 
</div>

的CSS：

:target {
  padding: 2px;
  background-color: #f5f5f5;
  border: 1px solid #e3e3e3;}

正如您所看到的，填充问题是当选择了引用时，将应用上面的CSS。使用填充，此背景颜色和边框应用于整个div（包括填充）并且看起来很糟糕。

解决这个问题的方法是什么？

即使我像这样在项目1周围添加另一个div：

<a href="#item1"> Item 1 </a>

<div id="item1" style="padding-top: 30px;">
<div class="I want only this div with coloured background">
    <h4>item1 title</h4>
    <p>item1 content</p> 
</div>
</div>

：target psuedo-element仍然选择整个div并为填充背景着色。

Answer 1

如果您只是坚持HTML，则必须在要链接的元素顶部使用填充，以便偏移导航栏。

如果这不是一个选项，你必须使用JavaScript解决方案。我只是快速写了这个，需要jQuery。 50将是导航栏的高度。

$('a[href^=#]').on('click', function(e){
  e.preventDefault();
  var $this = $(this), $target = $($this.attr('href'));
  $('body').animate({
    scrollTop: $target.offset().top - 50
  }, 200);
});

Answer 2

将标记与周围的div一起使用，并像这样更改CSS：

:target > div {
  padding: 2px;
  background-color: #f5f5f5;
  border: 1px solid #e3e3e3;
}

Answer 3

为什么不为h4元素添加边距？如果您链接的每个div都以h4标题开头，那么请执行类似

的操作

div h4:first-child{margin-top:20px;}

导航栏下方的html哈希引用位置元素

3 个答案: