画面の上に要素を配置する

Question

jQueryを使用してアコーディオンを作成しようとしています。私のコードは以下で共有しています。このアコーディオンで

$(document).ready(function() { 
 
    
 
    $('#initial .section-content').slideDown(); 
 
    
 
    $('h2').click(function() { 
 
    $('.section-content').slideUp(); 
 
    $(this).siblings('.section-content').slideDown(); 
 
    }); 
 
})

.section-content { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="initial"> 
 
    <h2>Section 1</h2> 
 
    <p class="section-content"> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac purus at urna ultrices placerat in a ipsum. Nullam tincidunt tortor quis nibh feugiat, id finibus nisl rutrum. Donec cursus ligula quam, sit amet mollis elit hendrerit quis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut sed massa tellus. 
 
    
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac purus at urna ultrices placerat in a ipsum. Nullam tincidunt tortor quis nibh feugiat, id finibus nisl rutrum. Donec cursus ligula quam, sit amet mollis elit hendrerit quis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut sed massa tellus. 
 
    </p> 
 
</div> 
 
<div> 
 
    <h2>Section 2</h2> 
 
    <p class="section-content"> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac purus at urna ultrices placerat in a ipsum. Nullam tincidunt tortor quis nibh feugiat, id finibus nisl rutrum. Donec cursus ligula quam, sit amet mollis elit hendrerit quis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut sed massa tellus. 
 
    
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac purus at urna ultrices placerat in a ipsum. Nullam tincidunt tortor quis nibh feugiat, id finibus nisl rutrum. Donec cursus ligula quam, sit amet mollis elit hendrerit quis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut sed massa tellus. 
 
    </p> 
 
</div> 
 
<div> 
 
    <h2>Section 3</h2> 
 
    <p class="section-content"> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac purus at urna ultrices placerat in a ipsum. Nullam tincidunt tortor quis nibh feugiat, id finibus nisl rutrum. Donec cursus ligula quam, sit amet mollis elit hendrerit quis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut sed massa tellus. 
 
    
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac purus at urna ultrices placerat in a ipsum. Nullam tincidunt tortor quis nibh feugiat, id finibus nisl rutrum. Donec cursus ligula quam, sit amet mollis elit hendrerit quis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut sed massa tellus. 
 
    </p> 
 
</div> 
 
<div> 
 
    <h2>Section 4</h2> 
 
    <p class="section-content"> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac purus at urna ultrices placerat in a ipsum. Nullam tincidunt tortor quis nibh feugiat, id finibus nisl rutrum. Donec cursus ligula quam, sit amet mollis elit hendrerit quis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut sed massa tellus. 
 
    
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac purus at urna ultrices placerat in a ipsum. Nullam tincidunt tortor quis nibh feugiat, id finibus nisl rutrum. Donec cursus ligula quam, sit amet mollis elit hendrerit quis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut sed massa tellus. 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac purus at urna ultrices placerat in a ipsum. Nullam tincidunt tortor quis nibh feugiat, id finibus nisl rutrum. Donec cursus ligula quam, sit amet mollis elit hendrerit quis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut sed massa tellus. 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac purus at urna ultrices placerat in a ipsum. Nullam tincidunt tortor quis nibh feugiat, id finibus nisl rutrum. Donec cursus ligula quam, sit amet mollis elit hendrerit quis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut sed massa tellus. 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac purus at urna ultrices placerat in a ipsum. Nullam tincidunt tortor quis nibh feugiat, id finibus nisl rutrum. Donec cursus ligula quam, sit amet mollis elit hendrerit quis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut sed massa tellus. 
 
    </p> 
 
</div>

、私は各タイトルをクリックすると、それは他のセクションこのセクションに対応するオープンコンテンツを閉じます。

このアコーディオンにさらに機能を追加したいと思います。見出しをクリックすると、対応するコンテンツが展開されます。その後、私はクリックした見出しが画面の上に現れるようにウィンドウをスクロールしたい。この機能を実装するにはどうすればよいですか？

Answer 1

を試してみて、あなたがアコーディオンのスクロール後の開放/閉鎖を達成したい場合は、slideDownか、slideUpへお電話のいずれかのコールバック関数を使用する必要があります。 slideDownため
ドキュメントはここにある：ここhttp://api.jquery.com/slidedown/
とslideUpのために：http://api.jquery.com/slideup/

コードは次のようになります。上記の例では、働いている

$('h2').click(function() { 
    $('.section-content').slideUp(); 
    $(this).siblings('.section-content').slideDown('slow', function() { 
     $('html, body').animate({ 
      scrollTop: $(this).siblings('h2').offset().top 
     }, 500); 
    }); 
}); 

フィドルは、ここで見つけることができます： https://jsfiddle.net/s48gx6Lf/

Answer 2

はこの1

$('h2').click(function() { 
    $('.section-content').slideUp(); 
    $(this).siblings('.section-content').slideDown('slow', function(){ 
     $('html, body').animate({ 
      scrollTop: $(this).siblings('.section-content').offset().top 
     }, 500); 
    }); 
});