HTML滾動到Div菜單

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>