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>

让我知道这是否有助于您解决问题。