HTML5とJavaScriptで限界を超えてトップへ戻る

あむちょです。

今まで学んできたHTML5やJavaScriptを生かして、ユーザビリティーの向上をはかる。

目次

• jQueryによるスクロールアニメーション
• DOMにより動的に新しい要素を挿入する
• 生成した新しい要素を消す

ホームページのユーザビリティーを向上させる方法はいくつか考えられますが、今回はよくあるページトップへ戻る機能をつけました。

本来なら右下あたりにでもボタンを常に表示しておくとこですが、まだ未完成なのでなし。
追加しました。

目標にしたのはLIGの世界一うざいトップへ戻るです。

まだテストですが下のリンクを押せば(限界を超えて)トップにもどります。

限界を超えてトップへ戻る。ブラウザーによってはうまく表示されません。

残念な気持ちになったところで以下やり方

jQueryによるスクロールアニメーション

滑らかにページをスクロールさせる方法はjQueryをつかってます。まずはscriptの読み込み

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

つぎにスクロールさせたい時に以下を呼び出す。

var position = 0;
$('body,html').animate({scrollTop:position}, time, 'swing');

今回はトップに戻るなので、positionは0です。第二引数はアニメーションにかける時間[ミリ秒]、第三引数のswingは徐々に早くなる動きです。等速の時はlinearを指定します。

DOMにより動的に新しい要素を挿入する

トップに戻るボタンが押されたときに、HTML5の<canvas>を動的に挿入します。その後body内の一番最初の要素の前に挿入しています。

<br />
function insertNewElem(elemHeight){<br />
    //現在のページ位置を所得<br />
    var currentY = document.documentElement.scrollTop || document.body.scrollTop;<br />
    //canvasを生成<br />
    var newElem = document.createElement(&quot;canvas&quot;);</p>
<p>    var b = document.body;<br />
    var d = document.documentElement;<br />
    //canvasの幅を画面幅と同じに<br />
    newElem.width = Math.max(b.clientWidth , b.scrollWidth, d.scrollWidth, d.clientWidth);<br />
    newElem.height = elemHeight;<br />
    //idを付与<br />
    newElem.setAttribute(&quot;id&quot;, &quot;newElem&quot;);<br />
    //body内の一番最初の要素の前にcanvasを挿入<br />
    document.body.insertBefore(newElem, document.body.firstChild);</p>
<p>    //新しい要素が挿入されたことによるズレを直す<br />
    window.scrollTo(0,elemHeight+currentY);<br />
}<br />

insertNewElem(1000);

とアンカーからよびだせば、高さ1000pxのcanvasが、今までのページトップより上に生成されます。

あとはcanvasに好き勝手描画するだけです。

生成した新しい要素を消す

idから要素を特定して、bodyから削除してます。

<br />
function removeElem(){<br />
    //削除したい要素<br />
    var element = document.getElementById(&quot;newElem&quot;);<br />
    //現在のスクロール位置<br />
    var currentY = document.documentElement.scrollTop || document.body.scrollTop;<br />
    currentY-= element.height;<br />
    //要素を削除<br />
    document.body.removeChild(element);<br />
    //要素が消えたことによるズレをなおす<br />
    window.scrollTo(0,currentY);<br />
}<br />

今回は、一度限界を超えてトップに戻ったら、見えなくなるまでスクロールすると削除するようにしてます。

最後にもう一度

限界を超えてトップに戻る

[ad][ad]