Html 当链接到网站的另一部分时，如何调整窗口位置？

我不熟悉HTML和CSS，正在尝试实现一个导航栏，每当用户单击链接时，它会将用户发送到我的单页网站的另一部分。我使用锚和参考链接来实现这一点。例如，我将有：

<a name="JR_Harrison_Target"></a>

][1]

转到页面上的该位置。唯一的问题是，当我点击链接时，它会将我发送到页面，页面顶部的浏览器上显示了我网站上一部分的大量像素。每当我单击指向任何和所有部分的链接时，都会发生这种情况。有没有办法调整我滚动到的锚点的位置，以便准确设置窗口？谢谢

问题示例：

---

尝试使用以下代码：

HTML

<div class="menu">
  <a href="#1">1</a>
  <a href="#2">2</a>
  <a href="#3">3</a>
  <a href="#4">4</a>
</div>

<section id="1"></section>
<section id="2"></section>
<section id="3"></section>
<section id="4"></section>

JSFiddle：

如您所见，为了使链接正常工作，您需要将id道具放置在您想要滚动到的部分上。你将被“传送”到本节的开头

每个部分都应该有固定的高度，并且内部的任何元素都不应该从中出来（例如，背景图像比部分本身大）。

您能给我们看一个吗？

<div class="menu">
  <a href="#1">1</a>
  <a href="#2">2</a>
  <a href="#3">3</a>
  <a href="#4">4</a>
</div>

<section id="1"></section>
<section id="2"></section>
<section id="3"></section>
<section id="4"></section>

section {
  height: 400px;
  background: red;
  border: 2px solid black;
}

.menu {
  position: fixed;
  top: 0;
  height: 50px;
  width: 100%;
  background: #fff;
  color: black;
  display: flex;
  align-items: center;
  opacity: .5;
}

.menu a {
  margin: 0 20px;
}