プロのクリエイターがホームページの作成や運用ノウハウについて無料公開!

ホームページTIPS
facebook twitter mail

このサイトでは、ホームページ制作運用に関する各種の情報を無料公開しています。
内容についてのご意見・ご指摘については、フォームからお知らせいただけば、適宜変更させていただきます。

javascriptに関するTips

2017.10.26更新

ページのトップ [ 最上段 ] へ戻るスクロールボタン

Attention!

javascript とcssを使ってページ内スクロールボタンの作り方をご紹介します。ここでは使用頻度が高いと思われる「ページのトップ [ 最上段 ]へ戻るボタン」を作ります。ある程度スクロールした時点で、戻るボタンを画面右下にフェード表示させる場合を想定しています。

1まずはhtmlとcssでボタンを配置します
 /* 全ページ共通で使用したい場合には「footerテンプレート」などに組み込んでも良いでしょう*/

<div id="for_top">
    <a href="business.html"><img src="under_img/for_top_btn.jpg" alt="TOPへ戻る" width="60px" height="60"></a>
 </div>


/* cssはこんな感じで画面右下に固定配置します */

#for_top {
    position: fixed;
    bottom: 0px;
    right: 40px;
    z-index: 10;
}
2javascriptでスクロールの動きを実装します。
<!--TOPへ戻るボタン | スムーズなスクロールを実装します-->

<script type="text/javascript">
$(function(){

// ボタンの要素を指定します。ここでは「#for_top a」を指定
	var $btn = $('#for_top a');
	var isHidden = true;

//  デフォルトは非表示
	$btn.hide();
		$(window).scroll(function () {

// 240pxスクロールした時点でフェードイン表示する
		if( $(this).scrollTop() > 240 ) {  
			if( isHidden ) {
				$btn.stop(true,true).fadeIn(200);
				isHidden = false;
			}
		} else {

//最上段から240pxの位置に戻るとフェードアウトで消える
			if( !isHidden ) {
				$btn.stop(true,true).fadeOut();
				isHidden = true;
			}
		}
	});

// クリックイベントの登録
	$btn.click(function(){

//  ページトップへスクロール
		$('html, body').animate({
				'scrollTop': 0

// 1/1000秒でスピード調整
			}, 300);
		
// デフォルトイベントのキャンセル
		return false;
	});
});
</script>

jQueryの「smoothscroll.js」なども有名ですが、このくらいのjsならば、head内に書いてしまっても良いと思います。縦に長くなりがちなスマートフォンレイアウトにも効果的なスクリプトです。とにかくお手軽に使い回したいですね。

3もっと単純なケース「指定位置までスクロールさせるボタン」をつくる場合
<script type="text/javascript">

$(function(){

//ボタンになる要素を指定
    var $btn = $('#for_top');
// クリックイベントの登録
	$btn.click(function(){
//  ページトップへスクロール 300はスピード調整(1/1000秒)
	$('html, body').animate({'scrollTop': 0}, 300);
// イベントのキャンセル
  return false;

 });
});

</script>

押すと指定位置までスクロールするボタンです。とっても簡単ですね。

トップへ