Question

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

我知道如何制作简单的可点击文本来滚动页面。但是我想要这个菜单 https://i.stack.imgur.com/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>

Answer 2

这是我在20分钟左右的时间内制作的简单作品。这对您来说应该是一个好的开始。

window.onload = function() {
  var menuItems = document.querySelectorAll(".menu_item");

  for(var i=0; i<menuItems.length; i++) {
    menuItems[i].onclick = function(event) {
      var ref = event.target.getAttribute("data-ref");
      
      document.querySelector(ref).scrollIntoView({behavior: 'smooth', block: 'start'});
    }
  }
}

#menu {
  right: 5px;
  position: fixed;

  bottom: 50%;
  -webkit-transform: translateY(50%);
  -moz-transform: translateY(50%);
  -ms-transform: translateY(50%);
  -o-transform: translateY(50%);
  transform: translateY(50%);
}

.menu_item {
  position: relative;

  background: #999999;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin-bottom: 5px;
  cursor: pointer;
}

.menu_item:hover {
  background: #5896ca;
}

.menu_label {
    position: absolute;
    right: 24px;
    transform: translateX(0%);
    background: #5896ca;
    text-align: center;
    white-space: nowrap;
    width: 109px;
    display: none;
    color: white;
}

.menu_item:hover .menu_label {
  display: block;
}

<div id="menu">
  <div class="menu_item" data-ref="#home">
    <div class="menu_label">Home</div>
   </div>
   <div class="menu_item" data-ref="#about">
    <div class="menu_label">About</div>
   </div>
   <div class="menu_item" data-ref="#contact">
    <div class="menu_label">Contact Us</div>
   </div>
   <div class="menu_item" data-ref="#something_else">
    <div class="menu_label">Something Else</div>
   </div>
</div>

<h2 id="home">HOME</h2>

<p>home content</p>
<p>home content</p>
<p>home content</p>
<p>home content</p>
<p>home content</p>
<p>home content</p>
<p>home content</p>
<p>home content</p>
<p>home content</p>
<p>home content</p>
<p>home content</p>
<p>home content</p>
<p>home content</p>

<h2 id="about">ABOUT US</h2>

<p>about us content</p>
<p>about us content</p>
<p>about us content</p>
<p>about us content</p>
<p>about us content</p>
<p>about us content</p>
<p>about us content</p>
<p>about us content</p>
<p>about us content</p>
<p>about us content</p>
<p>about us content</p>
<p>about us content</p>
<p>about us content</p>
<p>about us content</p>
<p>about us content</p>

<h2 id="contact">CONTACT US</h2>

<p>contact us content</p>
<p>contact us content</p>
<p>contact us content</p>
<p>contact us content</p>
<p>contact us content</p>
<p>contact us content</p>
<p>contact us content</p>
<p>contact us content</p>
<p>contact us content</p>
<p>contact us content</p>
<p>contact us content</p>
<p>contact us content</p>
<p>contact us content</p>
<p>contact us content</p>

<h2 id="something_else">SOMETHING ELSE</h2>

<p>something else content</p>
<p>something else content</p>
<p>something else content</p>
<p>something else content</p>
<p>something else content</p>
<p>something else content</p>
<p>something else content</p>
<p>something else content</p>
<p>something else content</p>
<p>something else content</p>
<p>something else content</p>
<p>something else content</p>
<p>something else content</p>
<p>something else content</p>
<p>something else content</p>
<p>something else content</p>

HTML滚动到Div菜单

2 个答案: