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

Question

通常情况下，滚动到HTML中的任何部分时，只需添加id并添加href=#id .

就我而言，我有一个 <h3> id上面的tag，需要先显示。

有什么方法可以用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>