这是我的建议。
1.将该类从所有
1.将类添加到属于散列的类
1.更改if以使代码更短/更简单

$(function() {
  // Add smooth scrolling to all links
  $("a").on('click', function(event) {

    // Make sure this.hash has a value before overriding default behavior
    if (this.hash === "") return;
    $('.box').removeClass("black"); // remove from all
    // Prevent default anchor click behavior
    event.preventDefault();
    // Store hash in scope
    var hash = this.hash;
    // Using jQuery's animate() method to add smooth page scroll
    // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
    $('html, body').animate({
      scrollTop: $(hash).offset().top
    }, 800, function() {
      // Add hash (#) to URL when done scrolling (default click behavior)
      window.location.hash = hash;
      const $parent = $(hash);
      $('.box:first', $parent).addClass("black");
    });

  });
});

#Segment1 {
  background-color: yellow;
  padding: 50px;
}

#Segment2 {
  background-color: pink;
  padding: 50px;
}

.box {
  padding: 10px 20px;
  border: 1px solid #000000;
  margin-bottom: 5px;
}

.gray {
  background-color: lightgray;
}

.black {
  background-color: black;
  color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<a href="#Segment1" class="">Segment1</a>
<a href="#Segment2" class="">Segment2</a>

<br><br><br><br><br>

<div id="Segment1">
  <div class="box gray">Lorem Ipsum...</div>
  <div class="box gray">Lorem Ipsum...</div>
  <div class="box gray">Lorem Ipsum...</div>
</div>

<div id="Segment2">
  <div class="box gray">Lorem Ipsum...</div>
  <div class="box gray">Lorem Ipsum...</div>
  <div class="box gray">Lorem Ipsum...</div>
</div>