すずろぐ

人生大逆転を目指す、鈴木俊吾の成長日記

ページ先頭に移動するブックマークレット「PageTop」を作ってみた

プログラミング

こんにちは、すずしんです。

今日はちょこっとだけJavaScriptのプログラミングをしまして…。 ページ先頭にすぐ移動できるブックマークレットPageTop」を作ってみました。 そこで、今回の記事ではPageTopについて紹介したいと思います。 やっていることは非常に地味なのですが、少しは便利なのでぜひ使ってみてください。

PageTopとは?

今見ているページの先頭にすぐ戻りたいということは時々ありますよね? サイトによってはページの先頭に戻るボタンやリンクがある場合があります。 それならまだ良いのですが、そういった機能が無いサイトもあります。 その場合、マウスホイールをぐるぐる回したり、スクロールバーを先頭までスクロールするのってちょっと大変ですよね。

そんな時にこの「PageTop」が役立ちます。 PageTopは、今見ているページの先頭(一番上)にすぐスクロールして移動するブックマークレットです。 ワンクリックでページのどこからでも一瞬でページの先頭に戻ることができます。 非常に地味なのですがその効果はなかなかだと思いますよ。

PageTopについて

PageTopの登録

PageTopをブックマークレットとして使うためには、ブックマークに保存する必要があります。 まず、以下のコードをコピーします。 コード上でダブルクリックすると全選択されますので、後は「Ctrl+C」でコピーできます。 そして、お使いのブラウザのブックマークバー上で右クリック→「ページを追加」を選択します。 ブックマークの編集画面が表示されますので、名前に「PageTop」、URLにさきほどコピーしたコードを貼り付けて保存して下さい。 ブックマークレットの保存場所は、ブックマークバー上か、ブックマークバーに「ブックマークレット」というフォルダを作って、その中に保存しておくと分かりやすくて使いやすいと思います。

[js] javascript:(function(){scrollTo(0, 0);})(); [/js]

PageTopの使い方

PageTopの使い方は簡単です。 ページの先頭に戻りたいなと思ったらPageTopをクリックします。 すると、ページの先頭に一瞬で戻れます。

PageTopのソースコード

PageTopのソースコードは以下のとおりです。 scrollTo関数で(0, 0)を指定して先頭にスクロールさせているだけです。 見ての通り、コード量もほんの僅かです。 非常に単純ですね!

[js] javascript:(function(){ scrollTo(0, 0); })(); [/js]

まとめ

今回紹介したブックマークレット「PageTop」を使うと、ページの先頭にすぐ戻ることができます。 今までページの先頭に戻るのにマウスホイールやスクロールバーを使っていた人にとっては、手間が省けるので便利なのではないでしょうか? 縁の下の力持ち的な存在のブックマークレットなので、ぜひ使ってやって下さい。

今回は非常に単純なプログラミングでしたので、あまりプログラミングしたという実感がありませんでしたね。 次はもうちょっと複雑でより実用的なブックマークレットを作ってみたいです。