Javascript(jQuery) ボタンクリックでページのトップにスクロールして戻る方法 ホームページ制作 | 墨田区

Javascript(jQuery) ボタンクリックでページのトップにスクロールして戻る方法

LINEで送る
Pocket

このサイトでも利用していますが、ページを下にスクロールすると、右下に矢印画像が表示されます。矢印ボタンをクリックすると、ページのトップへ戻ってくれる優れものです。
縦に長いページは、マウスホイールやスクロールバーを使って戻るのは面倒ですから、この機能を実装することをおすすめします。
サイト閲覧者のために、ユーザビリティを向上させましょう!




【PR】マジか?!「アレ」してるLINEスタンプっていったい・・・


ライブラリファイルのダウンロード

この機能は jQuery Scroll to Top Control というプラグインで動作します。
配布先サイトから、「scrolltopcontrol.js」という JavaScript ファイルと、ボタン画像をダウンロードします。ボタン画像は自分で作ったものでも利用できます。
ダウンロードしたファイルを、任意の場所にアップロードすればOKです。


実装サンプル

まず、実装したいページの head タグ内に、jQueryライブラリ を GoogleAPI(Google Developers) から読込の読み込ませます。
次に、script タグで 「scrolltopcontrol.js」 を読み込ませます。

<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="scrolltopcontrol.jsの場所を指定"></script>
</head>

※この記事での jQuery のバージョンは、Ver.1.5.1 を使っています。既に利用されているようであれば記述を追加する必要はありません。

ボタン画像の保存場所は、scrolltopcontrol.js ファイルの中の記述で場所が指定されています。12行目を見てみましょう。

controlHTML: '<img src="up.png" style="width:48px; height:48px" />

ここで、ボタン画像の場所や大きさを変更できます。
必要に応じて変更をおこないましょう。

すべてのファイルの修正が終わったら、ページをアップロードすれば実装完了です。

動作しなかったり、画像が表示されない場合、ファイルの場所やファイル名の指定が誤っている場合がほとんどですので、見直ししてみましょう。


動作オプション

特に変更をしなくても問題ありませんが、いくつか設定が変えられますので、ご紹介します。scrolltopcontrol.js ファイルの11行目と13行目を見てください。

setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]}
controlattrs: {offsetx:5, offsety:5}

startline

どれだけスクロールしたらボタンが現れるかを設定できます。
数値が大きいほど、より多く下までスクロールしてから現れるようになります。


scrollto

0=top か文字で戻り先を指定します。
初期設定では 0 ですが、任意の戻り先(id)を指定できます。
scrollto: ‘contents’と記述すると、

<div id="contents">

の位置に戻ります。


scrollduration

戻るためのスクロール時間を指定できます。数値が大きいほど戻るのに時間が掛かります。


fadeduration

ボタン画像が表示されたり非表示になったりする時間を指定できます。
初期値では、表示が 500 、非表示が 100となっています。
数値が大きいほど表示/非表示に時間が掛かります。


offsetx/offsety

ボタン画像の位置を設定できます。
offsetx がウィンドウ右端からの距離で、offsety が下からの距離です。
数値が大きいほどウィンドウの内側に寄ります。
邪魔にならない位置に配置しましょう。


当サイトでは、以下のように設定しています。
setting: {startline:100, scrollto: 0, scrollduration:500, fadeduration:[500, 100]}
<img src="scrollup.png" style="width:70px; height:70px" />
controlattrs: {offsetx:5, offsety:5}
画像も張っておきますので、よかったら使ってください。
scrollup
おつかれさまでした。

LINEで送る
Pocket

この記事がお役に立ちましたら シェア をお願いいたします。

Javascript / jQueryの勉強が思うように進まないときは!

Javascript / jQueryの勉強が思うように進まないのであれば、プロに直接質問ができる プログラミングスクール を検討してみてはいかがでしょうか?プログラミングスクールに申し込めば、短期間で一定のスキルを身に着けることができます!

Javascript / jQueryコースあり!きめ細やかなコーチング WebCamp 1ヶ月でWebスキルをマスター!|WebCamp ウェブキャンプ

「1ヶ月でWebスキルをマスターするWebCamp」では、みんなで学ぶ集団講義制と、自由に通えるフレックス制を導入しており、自分のスタイルに合った学び方が選べるのが特徴です。そして生徒1人1人に必ずプログラミングのスペシャリストが付き、きめ細やかなコーチングをしてくれるところが魅力的です。

特に珍しいのは、ママコースというものがあること。本当は自分のスキルを伸ばしたい主婦・ママ達を応援してくれているんですねー。素晴らしい!!
ママコースは こちら から

こちらも卒業生なら無期限&無制限で、公式パートナーの求人をご紹介してくれますので、安心してスキルアップに取り組めますね。

東京・愛知・福岡を営業エリアとされています。
まずは気軽に 無料説明会 に申し込んでみるのもアリですよ^^


Javascript / jQueryコースあり!現場のプロが直接指導 超現場主義 ウェブデザインスクールをお探しならWEB塾 超現場主義|東京・名古屋・札幌・豊明

WEB制作会社でもある「デザインスクール Web塾 超現場主義」は、一般的なパソコンスクールとは全く違います。WEB制作の現場で活躍しているクリエイター達がマンツーマンで指導するというスタイルは、プロの現場に入り、諸先輩方から指導を受けているのと何ら遜色がありません。間違いなく短期間でプロの技を習得できるでしょう!

更にさらに、なんと 就職のサポート をしてくれるというのですから驚きです!!

Web業界への転職支援や、フリーランスとしての仕事の紹介、また人材派遣会社との連携で派遣登録など、その契約形態は様々です。スキルアップもできて仕事もアサインしてくれるとはなんとも素晴らしいスクールがあったものですね。

東京・名古屋・札幌・豊明を営業エリアとされています。
気になる方は一度チェックしてみてください。


コメントを残す

お名前 (必須)
メールアドレス
(アドレスは公開されません)

コメント(必須)

Trackback URL