URL href失败：锚点，URL和Javascript

Question

I am using javascript for smooth scrolling (in script tags below) and also have href for anchor links. All of the anchors are working fine but the javascript appears to be disabling the href for the URL. Can you help me rewrite this so that works as well?

<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() is going to prevent the default, which for anchors is going to that url. You probably want to add a class to the anchors that you want to animate and select only those instead of preventing default on all anchor tags.

Answer 2

Acutally since you have unique data-hover for each element, all we have to do then is filter it by validating the value of their data-hover attribute.

<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>

Let me know if this helps you with your problem.