URL href 失败：锚点、URL 和 Javascript

Question

我正在使用 javascript 进行平滑滚动（在下面的脚本标签中），并且还有用于锚链接的 href。所有锚点都工作正常，但 javascript 似乎正在禁用 URL 的 href。你能帮我重写一下，这样也能正常工作吗？

<ul class="snip1143">
    <li class><a href="#home1" data-hover="Home">Home</a></li>
    <li><a href="#about1" data-hover="About">About</a></li>
    <li><a href="#experience1" data-hover="Work">Work</a></li>
    <li><a href="URL HERE" data-hover="Blog">Blog</a>   </li
    <li><a href="#contact1" data-hover="Contact">Contact</a></li>

<script>

  $(document).on('click', 'a', function(event) {
      event.preventDefault();

      $('html, body').animate({
          scrollTop: $( $.attr(this, 'href') ).offset().top
      }, 500);
  });

</script>

Answer 1

event.preventDefault() 将阻止默认值，对于锚点，默认值将指向该 url。您可能希望将一个类添加到要设置动画的锚点并仅选择那些而不是阻止所有锚点标签的默认设置。

Answer 2

实际上，因为每个元素都有唯一的data-hover，所以我们要做的就是通过验证其data-hover 属性的值来过滤它。

<script>

  $(document).on('click', 'a', function(event) {
      if($(this).data('hover') !== "Blog"){       
       $('html, body').animate({
          scrollTop: $( $.attr(this, 'href') ).offset().top
       }, 500);
    }// since i noticed that you want to redirect the page once the Blog link is clicked
  });

</script>

如果这对您的问题有帮助，请告诉我。