html书签链接某些文本不出现

Question

我创建了一个指向同一个页面的链接(Bookmark)。但我现在面临一个问题。当我从侧边栏单击链接上的链接时，它工作正常，但标题或某些部分在显示中没有正确显示。

当我单击链接时，标题或某个部分将被隐藏在标题中。

​

但我想要完整的部分被展示成这样-

​

我该如何解决这个问题？

​

header{
width: 100%;
height: 50px;
border-bottom: 1px solid #333;
background-color: #fff;
z-index: 5;
top: 0;
position: fixed;
}
nav{
width: 20%;
height: 100%;
top: 0;
left: 0;
position: fixed;
border-right: 1px solid #333;
}
article{
padding-top: 60px;
margin-left: 20%;
width: 60%;
}
aside{
width: 20%;
right: 0;
top: 0;
position: fixed;
border-left: 1px solid #333;
height: 100%;
padding-top: 60px;
}

<header></header>
<nav></nav>

<article>
<a name="hyper-1"></a>
<h1>Hyper 1</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>

<a name="hyper-2"></a>
<h1>Hyper 2</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>

<a name="hyper-3"></a>
<h1>Hyper 3</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</article>

<aside>
IN THIS CONTENT:
<a href="#hyper-1">Hyper-1</a><br/>
<a href="#hyper-2">Hyper-2</a><br/>
<a href="#hyper-3">Hyper-3</a><br/>
</aside>

​

Answer 1

这个问题是由于元素是空的。它们没有一致性，滚动到此元素时不要在div顶部按下

要解决这个问题，一个想法可以是在<a>之后有一个隐藏的after元素，当滚动到这个锚点时，按预期按下

article a::after {
  content: ' ';
  padding: 12px;
}

​

header {
  width: 100%;
  height: 50px;
  border-bottom: 1px solid #333;
  background-color: #fff;
  z-index: 5;
  top: 0;
  position: fixed;
}

nav {
  width: 20%;
  height: 100%;
  top: 0;
  left: 0;
  position: fixed;
  border-right: 1px solid #333;
}

article {
  padding-top: 60px;
  margin-left: 20%;
  width: 60%;
}

article a::after {
  content: ' ';
  padding: 12px;
}

aside {
  width: 20%;
  right: 0;
  top: 0;
  position: fixed;
  border-left: 1px solid #333;
  height: 100%;
  padding-top: 60px;
}

<header></header>
<nav></nav>

<article>
  <a name="hyper-1"></a>
  <h1>Hyper 1</h1>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
    has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
    publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  </p>

  <a name="hyper-2"></a>
  <h1>Hyper 2</h1>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
    has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
    publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  </p>

  <a name="hyper-3"></a>
  <h1>Hyper 3</h1>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
    has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
    publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  </p>
</article>

<aside>
  IN THIS CONTENT:
  <a href="#hyper-1">Hyper-1</a><br/>
  <a href="#hyper-2">Hyper-2</a><br/>
  <a href="#hyper-3">Hyper-3</a><br/>
</aside>

​

Answer 2

如果我得到的正确，你需要滚动到页面顶部任何时候，它被加载..。因为它可以从来自同一个页面的链接中加载。

一种解决方案是在页面准备就绪后立即在页面顶部滚动：

$(document).ready(function(){
    $(this).scrollTop(0);
});