防止网站在点击锚点时重新加载。

Question

在我的网站上，我有一些锚标签，用户可以点击。点击锚标签后，页面会滚动到特定的锚。

如何防止我的网站在点击锚标签时重载？

<a href="#c1535" class="anchor-active">
  <span class="anchor-text">NEWS</span>
</a>

$('.anchors a').on('click', function(e) {
  e.preventDefault();
  $('.anchors a').removeClass('anchor-active');
  $(this).addClass('anchor-active');
  let target = this.hash;
  let $target = $(target);
  $('html, body').stop().animate({
    'scrollTop': ($target.offset().top - 220)
  }, 900, 'swing', function() {
    window.location.hash = target;
  });
});

$(document).on('scroll', function() {
  if($('.anchors').length > 0) {
    $('.anchors a').each(function () {
      if (isInViewport($(this).attr('href'))) {
        $(this).addClass('anchor-active');
          } else {
              $(this).removeClass('anchor-active');
          }
      });
      }
      positionAnchors();
      setTimeout(positionAnchors, 1000);
   }
});

function positionAnchors() {
    let element;
    let offset;
    if ($('#page-header').hasClass('scrolled')) {
        element = $('#page-header > .container-fluid');
    } else {
        element = $('#page-header');
    }
    offset = element.outerHeight();
    $('.anchors').css('top', offset);
}

function isInViewport(selector) {
    let elementTop = $(selector).offset().top;
    let elementBottom = elementTop + $(selector).outerHeight();
    let viewportTop = $(window).scrollTop();
    let viewportBottom = viewportTop + $(window).height();
    return elementBottom > viewportTop && elementTop < viewportBottom;
}