导航栏根据位置改变标签颜色+点击锚点滑动到指定位置 jQuery+JavaScript

首先你的页面每一部分上层都要有一个id值，方便你进行定位，其次，导航栏的 a标签 要有一个类名。

导航栏根据位置改变标签颜色

HTML部分

      <nav>
        <li>
          <a href="#toHeader" class="pagetop">首页</a>
        </li>
        <li>
          <a href="#live" class="livetop">xxxx</a>
        </li>
        <li>
          <a href="#platform" class="platformtop">xxxx</a>
        </li>
        <li>
          <a href="#enrollmentdata" class="enrollmentdatatop">xxxxx</a>
        </li>
        <li>
          <a href="#establish" class="establishtop">xxxxx</a>
        </li>
        <li>
          <a href="#case" class="casetop">xxxx</a>
        </li>
        <li>
          <a href="#aboutus" class="aboutustop">关于我们</a>
        </li>
      </nav>

JavaScript部分

其中减去的70是我导航栏的高度，我的导航栏是固定到顶部的，这个数值减不减，减多少看自己需求

<!-- 导航栏根据位置改变标签颜色 -->
<script type="text/javascript">
  $(function () {
    var arr = new Array(".pagetop", ".livetop", ".platformtop", ".enrollmentdatatop", ".establishtop", ".casetop",
      ".aboutustop");
    $(window).scroll(function () {
      if ($(document).scrollTop() >= 0 && $(document).scrollTop() < $('#live').offset().top - 70) {
        for (let i = 0; i < arr.length; i++) {
          if (".pagetop" !== arr[i]) {
            $(arr[i]).removeClass("active")
          } else {
            $(arr[i]).addClass("active")
          }
        }
      } else if ($(document).scrollTop() >= $('#live').offset().top - 70 && $(document).scrollTop() < $(
          '#platform').offset().top - 70) {
        for (let i = 0; i < arr.length; i++) {
          if (".livetop" !== arr[i]) {
            $(arr[i]).removeClass("active")
          } else {
            $(arr[i]).addClass("active")
          }
        }
      } else if ($(document).scrollTop() >= $('#platform').offset().top - 70 && $(document).scrollTop() < $(
          '#enrollmentdata').offset().top - 70) {
        for (let i = 0; i < arr.length; i++) {
          if (".platformtop" !== arr[i]) {
            $(arr[i]).removeClass("active")
          } else {
            $(arr[i]).addClass("active")
          }
        }
      } else if ($(document).scrollTop() >= $('#enrollmentdata').offset().top - 70 && $(document).scrollTop() <
        $('#establish').offset().top - 70) {
        for (let i = 0; i < arr.length; i++) {
          if (".enrollmentdatatop" !== arr[i]) {
            $(arr[i]).removeClass("active")
          } else {
            $(arr[i]).addClass("active")
          }
        }
      } else if ($(document).scrollTop() >= $('#establish').offset().top - 70 && $(document).scrollTop() < $(
          '#case').offset().top - 70) {
        for (let i = 0; i < arr.length; i++) {
          if (".establishtop" !== arr[i]) {
            $(arr[i]).removeClass("active")
          } else {
            $(arr[i]).addClass("active")
          }

        }
      } else if ($(document).scrollTop() >= $('#case').offset().top - 70 && $(document).scrollTop() < $(
          '#aboutus').offset().top - 70) {
        for (let i = 0; i < arr.length; i++) {
          if (".casetop" !== arr[i]) {
            $(arr[i]).removeClass("active")
          } else {
            $(arr[i]).addClass("active")
          }
        }
      } else if ($(document).scrollTop() >= $('#aboutus').offset().top - 70) {
        for (let i = 0; i < arr.length; i++) {
          if (".aboutustop" !== arr[i]) {
            $(arr[i]).removeClass("active")
          } else {
            $(arr[i]).addClass("active")
          }
        }
      }
    })
  })

</script>

css部分

nav>li>a.active {
  color: #E9302D;
  font-weight: 600;
}

总体思路

要计算出当前距离顶部的高度是否在这个部分，如果在，就给相应的标签添加类名；不在，就移除添加的类名。

点击锚点滑动到指定位置

JavaScript部分

<!-- 点击锚点滑动到指定位置 -->
<script>
  $(function () {
    $('.pagetop').click(function () {
      $('html,body').animate({
        scrollTop: $('#toHeader').offset().top
      }, 1000);
    })
  })
  $(function () {
    $('.livetop').click(function () {
      $('html,body').animate({
        scrollTop: $('#live').offset().top - 70
      }, 1000);
    })
  })
  $(function () {
    $('.platformtop').click(function () {
      $('html,body').animate({
        scrollTop: $('#platform').offset().top - 70
      }, 1000);
    })
  })
  $(function () {
    $('.enrollmentdatatop').click(function () {
      $('html,body').animate({
        scrollTop: $('#enrollmentdata').offset().top - 70
      }, 1000);
    })
  })
  $(function () {
    $('.establishtop').click(function () {
      $('html,body').animate({
        scrollTop: $('#establish').offset().top - 70
      }, 1000);
    })
  })
  $(function () {
    $('.casetop').click(function () {
      $('html,body').animate({
        scrollTop: $('#case').offset().top - 70
      }, 1000);
    })
  })
  $(function () {
    $('.aboutustop').click(function () {
      $('html,body').animate({
        scrollTop: $('#aboutus').offset().top - 70
      }, 1000);
    })
  })
</script>