fadeInを使用してdivをスクロール

Question

次のコードがあります。ボタンをクリックするとdivの内容がdivの頭文字から表示されます。js.Forが正しく表示されません。ボタンを押して、ページをスクロールするまでコンテンツを表示しません。では、ボタンをクリックするとdivコンテンツの先頭に自動的にスクロールする方法はありますか？

// HTML

<button type="button" class="btn btn-info btn-block" id="show"></button> 

<div class="container-fluid" id="detail" style="display:none;"></div> 

// Jsの

$(document).ready(function(){ 
    $("#show").click(function(){ 
     $("#detail").fadeIn(); 
    }); 
}); 

Answer 1

あなたはjQueryのScrollToプラグインを使用することができます。

http://api.jquery.com/scrollTop/

$('#myButton').click(function() { 
    //optionally remove the 500 (which is time in milliseconds) of the 
    //scrolling animation to remove the animation and make it instant 
    $.scrollTo($('#myDiv'), 500); 
}); 

Answer 2

あなたはdiv要素の上に要素を追加することができ、この

$(document).ready(function() { 
    $("#show").click(function() { 
     $("#detail").fadeIn(); 
     $('html, body').animate({ 
      scrollTop: $("#detail").offset().top - 100 
     }, 800); 
    }); 
}); 

Answer 3

を試してみてください。 その後、ボタンクリックイベントでこの関数を使用します。

$('html, body').animate({ 
     scrollTop: $("#elementtoScrollToID").offset().top 
    }, 2000); 

これは例です。 https://plnkr.co/edit/kcs8UZaBcaegwTSSeThM?p=preview