javascript - HTML 滚动到 Div 菜单

Question

<a href="#1">some text</a>    
<div id="1"></div>

我知道如何制作简单的可点击文本来滚动页面。但我想要这样的菜单 /image/trXZn.png我希望它能随着屏幕移动并且看起来不错。圆圈很好!鼠标输入时的弹出窗口看起来不错并且动画效果也很好。无论如何滚动都有效所以我只需要栏。如果您为我制作一个或向我发送已制作的链接，我将不胜感激。我不懂 HTML 或 JS。

编辑--所以我只想知道它是如何称呼的。如何制作。或者举个例子。

所以它只是页面右侧的圆圈上下移动人们滚动页面的方式，当我点击它时我想重定向到带有/#div 的页面

Answer 1

你可能会做类似的事情:

#menu {
  position: fixed;
  right: 0;
  opacity: 0.5;
}

#menu a {
  width: 20px;
  height: 20px;
  background: lightblue;
  display: block;
  border-radius: 50px;
  margin: 10px;
  transition-duration: 1s;
}

#menu a:hover {
  background: blue;
}

p {
  font-size: 30px;
}

<div id="menu">
  <a href="#1"></a>
  <a href="#2"></a>
  <a href="#3"></a>
  <a href="#4"></a>
  <a href="#5"></a>
 </div>
<div id="content">
  <p id="1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Condimentum lacinia quis vel eros donec ac odio. Velit dignissim sodales ut eu sem integer vitae justo eget. Ac placerat vestibulum lectus mauris ultrices eros in cursus. Nunc congue nisi vitae suscipit. Venenatis cras sed felis eget velit aliquet sagittis id. Quis ipsum suspendisse ultrices gravida dictum fusce ut placerat. Vitae tempus quam pellentesque nec nam aliquam. Adipiscing enim eu turpis egestas pretium aenean. Convallis tellus id interdum velit laoreet id donec ultrices. Gravida rutrum quisque non tellus orci ac auctor. Sed risus ultricies tristique nulla aliquet enim tortor at. Morbi tristique senectus et netus et malesuada fames ac.</p>

<p id="2">Tortor at risus viverra adipiscing at. Velit ut tortor pretium viverra suspendisse potenti nullam ac. Ut sem viverra aliquet eget sit amet tellus. Vel elit scelerisque mauris pellentesque pulvinar. Suscipit adipiscing bibendum est ultricies integer quis auctor. Vel risus commodo viverra maecenas accumsan. Odio euismod lacinia at quis risus. Adipiscing at in tellus integer feugiat scelerisque varius morbi enim. Elit at imperdiet dui accumsan sit amet. Consectetur purus ut faucibus pulvinar elementum integer. Nulla malesuada pellentesque elit eget gravida.</p>

<p id="3">Tortor pretium viverra suspendisse potenti nullam. Viverra vitae congue eu consequat ac. Nunc pulvinar sapien et ligula ullamcorper. Tellus at urna condimentum mattis. Volutpat odio facilisis mauris sit amet. Ut tristique et egestas quis ipsum. Leo integer malesuada nunc vel risus commodo viverra maecenas accumsan. Nisl nisi scelerisque eu ultrices. Sit amet luctus venenatis lectus magna fringilla urna porttitor rhoncus. Aliquam purus sit amet luctus venenatis lectus. Lectus sit amet est placerat in egestas. Sapien nec sagittis aliquam malesuada bibendum. Adipiscing tristique risus nec feugiat in fermentum posuere urna. Sem et tortor consequat id. Et malesuada fames ac turpis egestas sed tempus urna et. Etiam tempor orci eu lobortis elementum.</p>

<p id="4">Augue neque gravida in fermentum. Tellus mauris a diam maecenas sed enim ut. Molestie ac feugiat sed lectus vestibulum. Facilisi etiam dignissim diam quis enim lobortis. Sed euismod nisi porta lorem mollis aliquam ut. Quis commodo odio aenean sed adipiscing. Id donec ultrices tincidunt arcu non sodales. Sed egestas egestas fringilla phasellus faucibus scelerisque eleifend. Non tellus orci ac auctor augue mauris augue neque gravida. Sociis natoque penatibus et magnis dis parturient montes nascetur. Aenean euismod elementum nisi quis eleifend quam adipiscing. Nulla facilisi etiam dignissim diam quis enim lobortis. Blandit turpis cursus in hac habitasse platea dictumst quisque. Eget sit amet tellus cras adipiscing enim eu. Odio facilisis mauris sit amet. Quis viverra nibh cras pulvinar mattis nunc sed. Maecenas pharetra convallis posuere morbi leo urna molestie at.</p>

<p id="5">Praesent semper feugiat nibh sed pulvinar proin gravida hendrerit lectus. Mattis nunc sed blandit libero volutpat sed cras ornare. Purus sit amet volutpat consequat mauris nunc. Vitae ultricies leo integer malesuada nunc. Porttitor eget dolor morbi non. Ut pharetra sit amet aliquam. Mi sit amet mauris commodo. Vel orci porta non pulvinar. Proin sed libero enim sed faucibus. Eu lobortis elementum nibh tellus molestie nunc non. Fermentum leo vel orci porta. At tempor commodo ullamcorper a.</p>
</div>