为什么这个平滑滚动脚本只适用于一个按钮
[英]Why is this smooth scroll script only working for one button
问题描述
我想为 safari 向我的网站添加平滑滚动，并遇到了这个效果很好的解决方案。 但是将其添加到我的网站仅适用于 header 中的一个按钮。 如果您复制粘贴脚本并为每个按钮使用不同的 class 可能会起作用，但是有没有办法让一个脚本适用于所有按钮？
我的代码：
window.addEventListener('load', function() { // scroll into view document.querySelector('.scrollwrap').addEventListener('click', function(e) { e.preventDefault(); document.querySelector('.wrapper').scrollIntoView({ behavior: 'smooth' }); }); }); * { margin: 0; padding: 0; font-family: 'Montserrat', sans-serif; } body { height: 2000px; overflow-x: hidden; }.sample { margin-top: 1500px; }
<html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="preconnect" href="https://fonts.gstatic.com"> <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet"> <script defer src="https://unpkg.com/smoothscroll-polyfill@0.4.4/dist/smoothscroll.min.js"></script> <.--<script src="assets/script,js" type="text/javascript"></script>--> </head> <body> <ul> <li class="nav-item"><button type="button" data-number="1" class="activenav navb scrollwrap">link1</button></li> <li class="nav-item"><button type="button" data-number="2" class="navb scrollwrap">link2</button></li> <li class="nav-item"><button type="button" data-number="3" class="navb scrollwrap">link3</button></li> <li class="nav-item"><button type="button" data-number="4" class="navb scrollwrap">link4</button></li> </ul> <section class="sample wrapper"> <article class="scrollable-element-to-top"> <p>Lorem ipsum dolor sit amet. consectetur adipisicing elit, Qui iure obcaecati, repudiandae aspernatur cumque recusandae adipisci consequuntur maiores, quo in nulla ratione facere distinctio beatae. quae consequatur ab labore dolorum,</p> <p>Lorem ipsum dolor sit amet. consectetur adipisicing elit, Qui iure obcaecati, repudiandae aspernatur cumque recusandae adipisci consequuntur maiores, quo in nulla ratione facere distinctio beatae. quae consequatur ab labore dolorum,</p> <p>Lorem ipsum dolor sit amet. consectetur adipisicing elit, Qui iure obcaecati, repudiandae aspernatur cumque recusandae adipisci consequuntur maiores, quo in nulla ratione facere distinctio beatae. quae consequatur ab labore dolorum.</p> </article> </section> </body> </html>
1 个解决方案
解决方案1
3 已采纳 2021-04-20 13:20:39
.querySelector()返回第一个元素。 .querySelectorAll返回一个数组，您可以循环访问该数组。
window.addEventListener('load', function() { // scroll into view var btns = document.querySelectorAll('.scrollwrap'); for (let i = 0; i < btns.length; i++) { btns[i].addEventListener('click', function(e) { e.preventDefault(); document.querySelector('.wrapper').scrollIntoView({ behavior: 'smooth' }); }); } });
* { margin: 0; padding: 0; font-family: 'Montserrat', sans-serif; } body { height: 2000px; overflow-x: hidden; }.sample { margin-top: 1500px; }
<html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="preconnect" href="https://fonts.gstatic.com"> <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet"> <script defer src="https://unpkg.com/smoothscroll-polyfill@0.4.4/dist/smoothscroll.min.js"></script> <.--<script src="assets/script,js" type="text/javascript"></script>--> </head> <body> <ul> <li class="nav-item"><button type="button" data-number="1" class="activenav navb scrollwrap">link1</button></li> <li class="nav-item"><button type="button" data-number="2" class="navb scrollwrap">link2</button></li> <li class="nav-item"><button type="button" data-number="3" class="navb scrollwrap">link3</button></li> <li class="nav-item"><button type="button" data-number="4" class="navb scrollwrap">link4</button></li> </ul> <section class="sample wrapper"> <article class="scrollable-element-to-top"> <p>Lorem ipsum dolor sit amet. consectetur adipisicing elit, Qui iure obcaecati, repudiandae aspernatur cumque recusandae adipisci consequuntur maiores, quo in nulla ratione facere distinctio beatae. quae consequatur ab labore dolorum,</p> <p>Lorem ipsum dolor sit amet. consectetur adipisicing elit, Qui iure obcaecati, repudiandae aspernatur cumque recusandae adipisci consequuntur maiores, quo in nulla ratione facere distinctio beatae. quae consequatur ab labore dolorum,</p> <p>Lorem ipsum dolor sit amet. consectetur adipisicing elit, Qui iure obcaecati, repudiandae aspernatur cumque recusandae adipisci consequuntur maiores, quo in nulla ratione facere distinctio beatae. quae consequatur ab labore dolorum.</p> </article> </section> </body> </html>
只需按Java键即可平滑滚动
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.