HTML/CSS/JS 中的平滑滚动 Animation

Question

我有以下代码：

 // Smooth scroll for the navigation menu and links with.scrollto classes $(document).on('click', '.nav-menu a, .scrollto', function(e) { if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) { var target = $(this.hash); if (target.length) { e.preventDefault(); var scrollto = target.offset().top; $('html, body').animate({ scrollTop: scrollto }, 1500, 'easeInOutExpo'); if ($(this).parents('.nav-menu, .mobile-nav').length) { $('.nav-menu.active, .mobile-nav.active').removeClass('active'); $(this).closest('li').addClass('active'); } if ($('body').hasClass('mobile-nav-active')) { $('body').removeClass('mobile-nav-active'); $('.mobile-nav-toggle i').toggleClass('icofont-navigation-menu icofont-close'); } return false; } } });

 .nav-menu * { margin: 0; padding: 0; list-style: none; }.smoothScroll { transition: 0.3s; }.nav-menu>ul>li { position: relative; white-space: nowrap; }.nav-menu a { display: flex; align-items: center; color: #45505b; padding: 10px 18px; margin-bottom: 8px; transition: 0.3s; font-size: 15px; border-radius: 50px; background: #f2f3f5; height: 56px; width: 100%; overflow: hidden; transition: 0.3s; }.nav-menu ai { font-size: 20px; }.nav-menu a span { padding: 0 5px 0 7px; color: #45505b; } @media (min-width: 992px) {.nav-menu a { width: 56px; }.nav-menu a span { display: none; color: #fff; } }.nav-menu a:hover, .nav-menu.active>a, .nav-menu li:hover>a { color: #fff; background: #0563bb; }.nav-menu a:hover span, .nav-menu.active>a span, .nav-menu li:hover>a span { color: #fff; }.nav-menu a:hover, .nav-menu li:hover>a { width: 100%; color: #fff; }.nav-menu a:hover span, .nav-menu li:hover>a span { display: block; } /* Mobile Navigation */.mobile-nav-toggle { position: fixed; right: 15px; top: 15px; z-index: 9998; border: 0; background: none; font-size: 24px; transition: all 0.4s; outline: none;important: line-height; 1: cursor; pointer: text-align; right. }:mobile-nav-toggle i { color; #45505b. }:mobile-nav-active { overflow; hidden. }:mobile-nav-active #header { left; 0. }.mobile-nav-active:mobile-nav-toggle i { color; #0563bb; }

 <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <nav class="nav-menu"> <ul> <li class="active"><a href="#hero"><i class="bx bx-home"></i> <span>Home</span></a></li> <li><a href="#about"><i class="bx bx-user"></i> <span>About Me</span></a></li> <li><a href="#resume"><i class="bx bx-file"></i> <span>Resume</span></a></li> <li><a href="#services"><i class="bx bx-server"></i> <span>Skills</span></a></li> <li><a href="#project"><i class="bx bx-collection"></i> <span>Projects</span></a></li> <li><a href="#References"><i class="bx bx-message"></i> <span>References</span></a></li> <li><a href="#contact"><i class="bx bx-envelope"></i> <span>Contact</span></a></li> </ul> </nav>

基本上，我在网站中添加了另一个滚动按钮，并创建了一个不同的 CSS class，名为.smoothScroll ，可以在上面的代码 CSS 中看到。 我想将这个特定的 class 合并/添加到现有的 JS 代码中。 基本上，看看 JS 代码如何处理不同 class 的平滑滚动，例如.nav-menu a ？ 我也想在其中添加.smoothScroll ，因此.smoothScroll上也有相同的平滑滚动效果。 无论我在哪里使用这个 class，我都想在上面平滑滚动。

请不要更改现有的 JS 代码或从中删除任何类，我只是希望能够在其中添加.smoothScroll class 使其具有滚动效果。 我怎样才能在那里添加它？ 我尝试添加它，但它似乎不起作用。 有什么建议么？

Answer 1

您听说过 CSS 属性滚动行为吗？ 无需使用 js https://developer.mozilla.org/de/docs/Web/CSS/scroll-behavior执行此操作