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> 

これが問題の解決に役立つかどうか教えてください。