結論まで読み飛ばし機能 kurubusi.skip_articles.js
kurubusi.skip_articles.js
以前「ユーザーのパターン」のページで書きました、長い文章を書いちゃったけど、さっさと結論が知りたい人の為の読み飛ばし機能を作ってみました。
結論の部分にclass名を付けてボタンを設置するだけでOK!
ボタンをクリックすると結論を書いてある部分にスクロールします。
せっかちの現代人にピッタリの機能！
特記する特徴
同一ページ内に複数のボタンを設置することが出来ます
data-sas-group属性をつければ同ページに複数設置できます（する事ないと思うけど）
結論を複数設定できます。
さすがに結論一箇所にまとまってねっす。。という時も複数の結論に順にジャンプします。
基本的な設置方法
1.必用ファイルの読み込み
<head> … <script type="text/javascript" src="kurubusi.skip_articles.js"></script> <link href="kurubusi.skip_articles.css" rel="stylesheet" type="text/css"> … </head>
2.class名・独自属性の追加
結論まで飛ばす為のボタンを設置class名にk_sas_bをつければなんでも構いません。
<article> … <img src="button.png" class="k_sas_b" data-sas-group="group1" width="100" height="72" alt="読み飛ばし機能" /> … </article>
.k_sas_b {
position: absolute;
right: 10px;
top: 10px;
}
class="k_sas_b"- 基本的にはclass名さえつければOK！このボタンは
position:absoluteで最初の位置を設定して下さい。実際ボタンは親要素に対してposition:fixedを書けたように振る舞います。必須
オプション属性
data-sas-group="グループ名"- ボタンとグループ化したい結論に同じ属性名（aaa）を追加。
3.結論にclass名と独自属性を追加
結論部分にclassを付けます。結論はブロックレベル要素でもインライン要素でも構いません。
<span class="k_sas_w" data-sas-group="group1" data-sas-order="2">宝物のおかげでしあわせにくらしましたとさ。</span>
class="k_sas_w"- 結論部分を囲うタグにclass名をつけるだけで基本的にOK!
結論ボタンを押したら結論部分にclass="k_sas_point"がつくのでstyleはそこで設定してね！必須
オプション属性
data-sas-group="グループ名"- ボタンとグループ化したい結論に同じ属性名（aaa）を追加。
data-sas-order="スキップする順番"- 結論が複数ある時は基本的には上から下にスキップしていきますが、スキップする順番を変更したいときに付けてください。小さい数字順です。
ダウンロード
サンプル
結論ボタンを押してみましょう！
ザ・結論！！！
更新履歴
- 2014/10/17
- 1.0.01_publicbeta公開。