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

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 a i {
  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>

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

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

Answer 1

你听说过 CSS 属性滚动行为吗？不需要用js来做 https://developer.mozilla.org/de/docs/Web/CSS/scroll-behavior