bootstrap3で目次をつけよう

2015年12月2日更新 view: 10 view
http://news.mynavi.jp/series/word/021/images/012.jpg

記事に目次をつける

スポンサードリンク

bootstrap3ではheaderにnavbarを固定、追随させる場合がある。
そうすると普通に目次を作ってジャンプさせてもヘッダが邪魔してうまく飛ばない時がある。そこで、今回は

  • ヘッダの高さを自動取得
  • それを考慮して toc.js で目次をつけ
  • ジャンプする

という流れをやってみます。

まずはCSS

<style>
#toc:before {
content: "目次";
padding-left: 8px;
}
#toc {
backgound:#f9f9f9;
font-size: 95%;
display: table;
margin-bottom: 10px;
padding: 15px;
width: auto;
}
#toc ol,
#toc ol li {
margin: 5px 5px 5px 15px;
padding: 0;
}
#toc a:hover {
text-decoration: underline;
}
</style>

js

<script src="/js/jquery.toc_0.0.2.js"></script>
<script>


$(function(){

//メイン記事の要素
$("#main-article").toc({
startLevel: 'h2',
listType: 'ol'
});


var headerHight = $(".navbar").first().height(); //ヘッダの高さを自動で取得

$('a[href^=#]').on('click', function(e) {
var href= $(this).attr("href");
var target = $(href == "#" || href == "" ? 'html' : href);
var position = target.offset().top-headerHight; //ヘッダの高さ分位置をずらす
$("html, body").animate({scrollTop:position}, 150, "swing");
return false;
});
});
</script>

html

<div id="toc">ここに見出しが入る</div>
<div class="article spacer" id="main-article">
適当な本文。h2やh3タグで装飾してね。
</div>
スポンサードリンク

関連記事

関連カテゴリ