📅 最后修改于: 2023-12-03 15:15:41.251000 🧑 作者: Mango
有时候，页面内容很长，用户需要向下滚动才能看到标题，这对于用户来说可能不太友好。因此，我们需要确保标题始终在顶部，无论用户滚动到哪个位置，标题都应该在屏幕顶部或页面顶部。
在HTML中，我们可以使用锚点来确保标题始终在顶部。Markdown的版本如下：
[回到顶部](#top)
# top
这里我们将“回到顶部”这个链接的href属性设置为#top，然后在标题下方添加一个带有id属性的标签（本例子中设置为“top”），用于作为锚点。当用户点击“回到顶部”的链接时，页面会自动滚动到“top”这个标签所在的位置，也就是我们设置的标题所在的位置。
但是，如果我们需要确保标题始终在顶部，而不是点击链接才能到达，我们需要使用CSS实现。具体实现方法如下：
首先，我们需要将标题的位置设置为固定（fixed），这样当用户向下滚动时，标题将保持在顶部。
h1 {
position: fixed;
top: 0;
left: 50%;
transform: translateX(-50%);
}
接下来，我们需要在标题下方添加一个占位符，将占位符的高度设置为标题的高度，这样当标题被设为固定时，页面上的元素不会因为标题从文档流中移动而上移或下移。
header {
height: 100px; /* Change the number to match the height of your header */
}
最后，我们需要在标题和占位符之间添加一些填充（padding），这样当标题被设为固定时，页面上的内容不会被标题遮挡。
body {
padding-top: 100px; /* Change the number to match the height of your header */
}
完整的示例代码如下：
<!DOCTYPE html>
<html>
<head>
<title>确保标题始终在顶部</title>
<style>
h1 {
position: fixed;
top: 0;
left: 50%;
transform: translateX(-50%);
background-color: #333;
color: #fff;
padding: 10px;
margin: 0;
}
header {
height: 100px;
background-color: teal;
}
body {
padding-top: 100px;
}
</style>
</head>
<body>
<header></header>
<h1>这是一个标题</h1>
<p>这是长长的文章内容……</p>
</body>
</html>
通过以上代码实现，在随着用户向下滚动页面时，标题会始终保持在屏幕顶部，从而让用户随时了解自己所处的位置，也提高了用户体验。
Markdown的版本如下：
```HTML
<!DOCTYPE html>
<html>
<head>
<title>确保标题始终在顶部</title>
<style>
h1 {
position: fixed;
top: 0;
left: 50%;
transform: translateX(-50%);
background-color: #333;
color: #fff;
padding: 10px;
margin: 0;
}
header {
height: 100px;
background-color: teal;
}
body {
padding-top: 100px;
}
</style>
</head>
<body>
<header></header>
<h1>这是一个标题</h1>
<p>这是长长的文章内容……</p>
</body>
</html>