时间戳

首页 > 解决方案 > 如何使用 CSS 或 Javascript 为您的网站添加平滑滚动？

javascript - 如何使用 CSS 或 Javascript 为您的网站添加平滑滚动？

问题描述

每次单击导航栏中的链接时，我都需要添加平滑的滚动效果。这是导航栏：

  <header class="navbar">
    <div class="navElements">
      <div class="logo">
        <img src="./logo.png" alt="Millennium" />
      </div>
      <div class="hamburger">
        <input type="checkbox" id="check" />
        <label for="check" class="checkButton">
          <i class="fas fa-bars" style="font-size: 35px"></i>
        </label>
      </div>
    </div>
    <div>
      <ul class="navItems">
        <li><a href="#home" class="navItem active">HOME</a></li>
        <li><a href="#services" class="navItem">SERVICES</a></li>
        <li><a href="#projects" class="navItem">PROJECTS</a></li>
        <li><a href="#ourTeam" class="navItem">OUR TEAM</a></li>
        <li><a href="#contact" class="navItem">CONTACT</a></li>
      </ul>
    </div>
  </header>

我需要添加什么？和哪个班？我已经为id每个sectionbody

<div id="home">Stuff</div>
<div id="services">Stuff</div>
<div id="projects">Stuff</div>
<div id="ourTeam">Stuff</div>
<div id="contacts">Stuff</div>

帮帮我...

标签： javascripthtmlcss

解决方案

您需要Html, body像这样为 Try 设置动画，希望它有效！

HTML 链接：

<a href="#yourId" class="scrollTo">Learn More</a>

JS：

  $(".scrollTo").on('click', function(e) {
     e.preventDefault();
     var target = $(this).attr('href');
     $('html, body').animate({
       scrollTop: ($(target).offset().top)
     }, 2000);
  });

HTML 锚点：

  <div id="yourId">My content here</div>

推荐阅读