【jquery】タイトルを抽出して目次を作成+ページ内スクロール
プラグイン入れるのが微妙なラインだったんで簡単な目次作成のjqueryさくっと。
キュレーションとかブログサイトは目次付きが主流らしいですね~。
HTML
<div id="mokuji"></div> <div style="height:1000px;"></div> <h3 class="title">あああ</h3> <div style="height:1000px;"></div> <h3 class="title">いいい</h3> <div style="height:1000px;"></div> <h3 class="title">ううう</h3> <div style="height:1000px;"></div>
JS
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js?ver=4.3'></script> <script type='text/javascript' src='http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js?ver=4.3'></script> <script> $(document).ready(function(){ var count = 1; $('<p>目次</p>').appendTo('#mokuji'); $("h3.title",this).each(function(){ $('<span class="links">' + $(this).text() + '</span>').appendTo('#mokuji'); count++; }); $(document).on("click",".links ", function() { var i = $(".links").index(this) var p = $("h3.title").eq(i).offset().top; $('html,body').animate({ scrollTop: p }, 'fast'); return false; }); }); </script>
CSS
<style> span {display:block;cursor:pointer;} </style>