ページシークバーの作成
長々と縦にスクロールされていく長文記事を読んでいると、以下のようなことを思う事があります。
- どこまで読み終わったのかを把握したい
- 前の段落まで一気に戻りたい
それらの要件が解決できるインターフェイスデザインを考えていて、動画再生時に表示される水平なシークバーを縦スクロールされる文章と同期させるスクリプトをJQueryで作成しました。
『Pocket』にも同様なインターフェイスがあるのですが、シークバーからの操作も行える点が異なります。いわゆる「PAGE TOP」ボタンの機能も兼ねさせているのです。
ページシークバーの設置方法
はてなブログのデザイン画面→ヘッダに以下のコードをコピー&ペーストします。スタイルシート内の変更をすることで、下側に表示させたり、色を変更することができます。スマートフォンでの動作も確認しています。ソースコードの記事内への転載はご遠慮ください。
<div id="pagebar"></div> <div id="pagebar-bg"></div> <style type="text/css"> #pagebar { position: fixed; top: 0px; left: 0px; width:0px; height:8px; background-color:#944; z-index:128; } #pagebar-bg { position: fixed; top: 0px; left: 0px; width:100%; height:8px; opacity: 0.5; background-color:#ddd; z-index:256; } #pagebar-bg:hover { background-color:#bbb; } </style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript"> /* http://bulldra.hatenablog.com/entry/page-seekbar */ $(function(){ var viewSeekbar = function() { $('#pagebar').css('width', (($(window).scrollTop() + $(window).height()) / $('body').height() * 100.0) + "%"); } viewSeekbar(); $(window).scroll(viewSeekbar); $('#pagebar-bg').click(function(e){ $('html,body').animate({ scrollTop: $('body').height() * (e.pageX - e.target.offsetLeft) / $(window).width() - $(window).height()}, 300); return false; }); }); </script>
文章にも動画的なインターフェイスを取り入れる
そんなわけで、記事内のスクロールと横軸のシークバーを同期させる処理を作成しました。段落見出しや強調表示などの位置を読み取って、それにあわせた区切り線をシークバー内に入れることも考えたのですが、まずは簡単な実装にしています。
長文記事を取り回すためのインターフェイスは大切だと思っていて、今回は動画再生のような水平シークバーを取り入れてみました。1画面では収まりきらない縦軸の文章を1画面分の横軸に変換することで、直感的に把握できるようになると思いますので、よかったら利用してみてくださいね。なお、設置サポートや表示スタイル/アルゴリズムのカスタマイズ等のご依頼がありましたらサポートライセンスの購入をお願いいたします。