読者です 読者をやめる 読者になる 読者になる

メガカイロスは強い

いろいろ趣味について書く ツイッター→@ptrst102

ブログ内に目次を設置する【javascript不使用】

ぼく用メモ。

javascriptで云々して自動生成するのが楽ではあります。が、僕がプログラミングに疎いので、
javascriptなしの方針で行きましょう。ぼくHTMLだいすき。

目次 (クリックすると選択した箇所までスクロールします)
したいから
したいなら
したいとき
したいでしょ

したいから

目次にもどる

したいなら

目次にもどる

したいとき

目次にもどる

したいでしょ

目次にもどる





記述

<div id='mokuji' style='background: #F8F8F8;margin: 50px 0 0;padding: 15px;border: 1px solid #CCC;'><span style="font-size:110%;margin:0;font-weight:bold;">目次</span> <span style="font-size:80%;margin:0;color:#666;">(クリックすると選択した箇所までスクロールします)</span><a href="#1">したいから</a><a href="#2">したいなら</a><a href="#3">したいとき</a><a href="#4">したいでしょ</a>
</div>

<h3 id="1">したいから</h3>
<span style="font-size:80%"><a href="#mokuji">目次にもどる</a></span>

<h3 id="2">したいなら</h3>
<span style="font-size:80%"><a href="#mokuji">目次にもどる</a></span>

<h3 id="3">したいとき</h3>
<span style="font-size:80%"><a href="#mokuji">目次にもどる</a></span>

<h3 id="4">したいでしょ</h3>
<span style="font-size:80%"><a href="#mokuji">目次にもどる</a></span>
ちなみに

僕は面倒なのでjavascriptで処理します
クリックしたときの動きをスムーズにしたいときはjavascriptに頼りましょう。やはりjavascriptは神なんだよな。
【jQuery】ページ内リンクをするするーっとスムースにスクロールするJavascript | KLUTCHE