メニュー

WP版キャラチョコブック

Chocobanditz ONLINE

ページトップ

ページボトム

メニュー

Chocobanditz ONLINE

閉じる

DESIGN HTML・CSS JavaScript Webデザイン

スクロールで現れるページトップ&ボトムへ+リンクボタンの実装方法!!

投稿日:2014年10月19日 更新日:

Webページのトップに戻るボタンをアレンジする方法の覚書です。
ページ下(フッター位置)に進むボタンとリンクボタンを追加して、スクロールするとフェードして表示されるように実装しました。

これから、トップに戻るボタンを実装される方の参考になれば嬉しいです。

スポンサーリンク

スクロールで現れるページトップ&ボトム+リンクボタン

目次

  1. 01 Demo
  2. 02 HTMLマークアップサンプル
  3. 03 CSSの記述サンプル
  4. 04 外部jsファイルの作成と実装
  5. 05 補足smoothScroll.js
  6. 06 まとめ

01 Demo

まずはどんな感じになるのか把握したほうが理解が速いかなと思うので、動きのDemoを用意しました。

実際の動きを確認したい方はコチラ →Demo

02 HTMLマークアップサンプル

<!-- SideDock START -->

<ul id="side-dock" > <!--←➀-->
	<li><a href="#top"><img src="ページトップへボタン画像のURL" alt="ページトップへボタン" /></a></li><!--←➁-1-->
	<li><a href="リンク先のURL"><img src="リンクボタン画像のURL" alt="リンクボタン" /></a></li>
	<li><a href="#footer"><img src="ページボトムへボタン画像のURL" alt="ページボトムへボタン" /></a></li><!--←➁-2-->
</ul>

<!-- SideDock END -->
<body>~</body>

の間の任意の場所にHTML文を記述します。

[解説]

■➀表示するボタンのリストを作る
任意のid名を付けて、表示するボタンのリストを作ります。
※サンプルではid名をside-dockとしています。

■➁-1/➁-2ページ内での移動方法
ページトップやボトムなどページ内での移動にはページ内リンクを使っています。

移動したいエリアにid名を付け、
href=””に、移動先のid名を#(ハッシュ)に続けて記述します。

※サンプルではページトップ辺りのid名topエリアへhref属性に#topと指定して移動しています。

03 CSSの記述サンプル

/* ==========================================
    Side Dock
   ==========================================*/
  
#side-dock {
	display:block;
	list-style:none;
	margin: 0 0 0 0;
	width: 80px;
	position: fixed; /*←➀*/
	bottom: 20px; /*←➁-1*/
	right: 40px;  /*←➁-2*/
	z-index: 99998; /*←➂*/
	opacity: 0.8; /*←➃*/	
	text-decoration: none;
	overflow: hidden;	
}  

#side-dock li {
	padding: 0 0 10px 0;
}  
  
#side-dock li a img:hover {
	margin: 0 0 0px -80px; /*←➄*/
}

[解説]

■➀
positionプロパティでボタンリストを固定配置とします。

■➁-1/➁-2
ボタンリストを表示する位置を指定します。

※サンプルでは
ページ下から20px、右から40pxの位置を指定しています。

■➂
z-indexプロパティで
ボタンリストを記事の手前に配置します。

※z-indexプロパティの値が
記事<ボタンリスト
であれば、値は99998でなくともかまいません。

■➃
opacityプロパティで
ボタンリストの透明度を指定してます。

※必要なければ、この部分の記述は省略可です。

■➄
サンプルではimgタグを使ったCSSスプライトでマウスオーバーした際のボタン画像を切替え表示しています。

CSSスプライトについては↓を参照ください。

imgタグを使ったCSSスプライトで画像切替え表示する方法
-HTML&CSS小技Tips #001

04 外部jsファイルの作成と実装

//Side Dock出現

$(function () {
	var showFlag = false;
	var sideDock = $('#side-dock');	//←➀
	sideDock.css('bottom', '-300px');//←➁
	var showFlag = false;
	$(window).scroll(function () {
		if ($(this).scrollTop() > 400) { //←➂-1
			if (showFlag == false) {
				showFlag = true;
				sideDock.stop().animate({'bottom' : '20px'}, 200); //←➂-3
			}
		} else {
			if (showFlag) {
				showFlag = false;
				sideDock.stop().animate({'bottom' : '-300px'}, 200); //←➂-3
			}
		}
	});
});

上記のソースコードをテキストファイルにコピペして、拡張子jsの好きな名前を付けて保存します。
(例えばSideDock.jsなど)

HTMLのhead内に、保存先を指定して実装します。

↓いつものこんな感じで

<script type="text/javascript" src="js/SideDock.js"></script>

[解説]

■➀
ページスクロールで出現させたいボタンリストのid名を指定します。

■➁
ボタンリストをページ下から-300pxの位置(ページ外)に飛ばし、非表示としています。

■➂-1/➂-2/➂-3
スクロールが400に達したら(➂-1)ボタンリストの位置をページ下-300pxの位置から20pxの定位置まで200の速さで移動し出現させます(➂-2)

スクロールがページトップから400より手前に戻るとボタンリストの位置を20pxの定位置からページ下-300pxの位置まで200の速さで移動し非表示とします(➂-2)

05 補足smoothScroll.js

リンク先へスムースに移動出来ない方は、ページ内リンクをスムーズに行うjsライブラリを導入するとよいです。

コチラでは補足として、スムーズにスクロールするためのjQueryプラグインsmoothScrollを紹介しておきます。

下記のリンク先から
jquery.smooth-scroll.jsファイルをダウンロード

https://github.com/kswedberg/jquery-smooth-scroll

jQueryと一緒に保存先を指定して実装します。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="js/jquery.smooth-scroll.js"></script>

06 まとめ

サンプルではボタンの大きさ80×80px、ページ下から20px、右から40pxの位置に下から出現する動きで実装しています。

ボタンの大きさや動きなど
各自アレンジして頂ければと思います。

以上

この記事では、
ページスクロールで現れるトップ&ボトムへ+リンクボタンの実装方法をご紹介しました。

スポンサーリンク

-DESIGN, HTML・CSS, JavaScript, Webデザイン

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

MadiaMarkerメディアマーカー

Maerchen_Diverグッズ