Question

通常，当滚动到HTML中的任何部分时，只需添加id并添加href=#id。

就我而言，我在id上方有一个<h3>标签，需要首先显示它。

有什么方法可以使用CSS吗？

另一个问题，滚动到元素ID的链接时，是否有任何JavaScript（而非jQuery）可平滑滚动？

我的示例代码：

<a href="#nan-txt">Click here</a>
<h3 style="height: 500px;">NEW TEXT AT HERE</h3>
<p id="nan-txt">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>

Answer 1

最好的解决方案是将id设置为h3标签。但是，如果无法设置最佳选项，请将padding设置为负margin。下面的代码段中的示例。

有很多平滑的滚动脚本，我经常使用它： https://css-tricks.com/snippets/jquery/smooth-scrolling/

.space {
  height: 3000px;
}

h3 {
  margin-bottom: -50px;
}

#one {
  height: 3000px;
  padding-top: 50px;
}

<a href="#one">Click!</a>
<div class="space"></div>
<h3>Title of H3</h3>
<p id="one">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id risus consectetur, lobortis justo sed, feugiat ipsum. Suspendisse quis enim lacus. Curabitur lorem dolor, lobortis id metus quis, venenatis accumsan dui. Duis metus est, consectetur dignissim
  porta sodales, accumsan sit amet magna. Vestibulum id metus mauris. Etiam aliquet quam in est viverra, ut posuere nunc scelerisque. Morbi in ligula id mi iaculis pulvinar. Aliquam erat volutpat. Orci varius natoque penatibus et magnis dis parturient
  montes, nascetur ridiculus mus. Vivamus in lorem at massa molestie commodo aliquam sollicitudin augue. Nulla facilisi. Phasellus ultrices viverra mattis. Aenean rhoncus nibh a rhoncus congue. Nulla feugiat orci eget auctor venenatis. Integer a vehicula
  nunc, vitae aliquet sem. Aliquam scelerisque nisl non risus feugiat, sit amet efficitur ligula convallis.</p>

Answer 2

这可能是一个非常规的答案，但是我建议您将id移至要滚动到的元素：

<a href="#nan-txt">Click here</a>
<h3 id="nan-txt" style="height: 500px;">NEW TEXT AT HERE</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>

Answer 3

您可以在h3元素内添加nan-txt标签。这样它将停止在h3上。

关于平滑滚动，请将scroll-behavior: smooth样式添加到html中。

请参见下面的代码段

html{
scroll-behavior: smooth;
}

<a href="#nan-txt">Click here</a>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<p id="nan-txt">
<h3 style="height: 500px;">NEW TEXT AT HERE</h3>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>

CSS-滚动到ID，但需要在ID上方显示h3元素

3 个答案: