jQuery fadeInとdivに移動する

Question

私は、クリックするとdivで消える機能を作ろうとしており、それはdivに移動する必要があります。しかし、それは動作しません、最初のクリックdivが表示され、私はそこに移動するもう一度クリックする必要があります。 誰かが私を助けてくれますか？ https://jsfiddle.net/qzdxf478/

<a href="#princip-detail" class="showDetail">Continue</a> 


     <script> 
      $(document).ready(function() { 
       $('.showDetail').click(function() { 
        $('#princip-detail').fadeIn(); 
        if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { 

         var target = $(this.hash); 
         target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); 
         if (target.length) { 
          $('html,body').animate({ 
           scrollTop: target.offset().top 
          }, 1000); 
          return false; 
         } 
        } 
       }); 
      }); 
     </script> 

Answer 1

あなたがe.preventDefault();を使用してクリックしたアンカーのデフォルトのアクションを防ぎます。 jQueryライブラリを含めることを忘れないでください。アクションでそれを確認するには、以下のスニペットを実行します。

$(document).ready(function() { 
 
    $('.showDetail').click(function(e) { 
 
    e.preventDefault(); 
 
    $('#princip-detail').fadeIn(); 
 
    if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) { 
 

 
     var target = $(this.hash); 
 
     target = target.length ? target : $('[name=' + this.hash.slice(1) + ']'); 
 
     if (target.length) { 
 
     $('html,body').animate({ 
 
      scrollTop: target.offset().top 
 
     }, 1000); 
 
     return false; 
 
     } 
 
    } 
 
    }); 
 
});

#principy { 
 
    width: 100%; 
 
    height: auto; 
 
    min-height: 100%; 
 
    background: url('main-bg.jpg') no-repeat center center; 
 
    background-size: cover; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    overflow: hidden; 
 
    z-index: 20; 
 
} 
 

 
#princip-detail { 
 
    width: 100%; 
 
    position: absolute; 
 
    top: 100%; 
 
    left: 0; 
 
    height: auto; 
 
    min-height: 100%; 
 
    background: #f00 url("page-bg.jpg") no-repeat center center; 
 
    overflow: hidden; 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="principy"> 
 
    <div class="princip-topleft"> 
 
    <h2><a href="#princip-detail" class="showDetail">Continue</a></h2> 
 
    </div> 
 

 
</div> 
 

 
<div id="princip-detail"> 
 

 
</div>

Answer 2

<div id="principy"> 
    <div class="princip-topleft"> 
    <h2><a href="#princip-detail" class="showDetail">Continue</a></h2></div> 

</div> 

<div id="princip-detail"> 
    133131321212121323232323 
</div> 

#principy { 
    width: 100%; 
    height: auto; 
    min-height: 100%; 
    background: url('main-bg.jpg') no-repeat center center; 
    background-size: cover; 
    position: absolute; 
    top: 0; 
    left: 0; 
    overflow: hidden; 
    z-index: 20; 
} 

#princip-detail { 
    width: 100%; 
    position: absolute; 
    top: 100%; 
    left: 0; 
    height: auto; 
    min-height: 100%; 
    background: url("page-bg.jpg") no-repeat center center; 
    overflow: hidden; 
    display: none; 
} 

    $(document).ready(function() { 
       $('.showDetail').click(function() { 
       var curLink = this.hash; 
       $(curLink).fadeIn(1000, function() { 
        var offset = $(curLink).offset().top; 
        $('html,body').animate({ 
        scrollTop: offset 
        }, 1000); 

       }); 
       }); 
      }); 

フィドラーhttps://jsfiddle.net/5xj5Lg53/