実装内容
- ある程度スクロールされたら、「トップへ戻る」ボタンを徐々に表示させる
- 「トップへ戻る」ボタンをクリックしたら、ページの先頭へ戻る
- 「test_noへ移動」ボタンをクリックしたら、「test_no」の要素へ移動する
参考記事
今回もロジックはそのままです;
お世話になりました!
HTML
scroll_button.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>scroll_button</title>
<!-- stylesheet.cssの読み込み -->
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<!-- jqueryの読み込み -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<button type=button class="move-to-test">
<a href="#no_10">test10へ移動</a>
</button>
<div class="text" id="no_1">test1</div>
<div class="text" id="no_2">test2</div>
<div class="text" id="no_3">test3</div>
<div class="text" id="no_4">test4</div>
<div class="text" id="no_5">test5</div>
<div class="text" id="no_6">test6</div>
<div class="text" id="no_7">test7</div>
<div class="text" id="no_8">test8</div>
<div class="text" id="no_9">test9</div>
<div class="text" id="no_10">test10</div>
<button type=button class="move-to-test">
<a href="#no_20">test20へ移動</a>
</button>
<div class="text" id="no_11">test11</div>
<div class="text" id="no_12">test12</div>
<div class="text" id="no_13">test13</div>
<div class="text" id="no_14">test14</div>
<div class="text" id="no_15">test15</div>
<div class="text" id="no_16">test16</div>
<div class="text" id="no_17">test17</div>
<div class="text" id="no_18">test18</div>
<div class="text" id="no_19">test19</div>
<div class="text" id="no_20">test20</div>
<button type=button class="back-to-top">
<a href="#">トップへ戻る</a>
</button>
<!-- script.jsの読み込み -->
<script src="scroll_button_script.js"></script>
</body>
</html>
CSS
stylesheet.css
body {
height: 3000px;
}
.text{
font-size: 50px;
}
.move-to-test {
font-size: 80%;
}
/* リンクの下線を消す */
a {
text-decoration: none;
}
/* :link擬似クラスでリンクの文字色を変える */
a:link {
color : #000000;
}
/* :visited擬似クラスでリンククリック後の文字色を変える */
a:visited {
color : #000000;
}
.back-to-top {
/* スクロールされても位置を固定する */
position: fixed;
/* 画面右下に表示 */
bottom: 20px;
right: 20px;
font-size: 80%;
}
jQuery
scroll_button_script.js
$(function() {
// $topBtnにback-to-topボタンのjQueryオブジェクトを代入
var $topBtn = $('.back-to-top');
// 最初はボタンを隠しておく
$('.back-to-top').hide();
// ボタンの表示条件
$(window).scroll(function () {
// スクロール量が500以上になったら
if ($(this).scrollTop() > 500) {
// ボタンを表示させる
$topBtn.fadeIn();
} else {
// 500未満の場合は表示させない
$topBtn.fadeOut();
}
});
// ボタンクリックでページ内要素に移動
// 特定の移動先が無い場合はページトップへ移動
// aタグのhref属性の値が#始まりの場合のみ実行する
$('a[href^="#"]').click(function() {
// スクロールの速さ
var speed = 400;
// ボタンのhref属性の値を取得
var href= $(this).attr("href");
// ボタンのhref属性が#のみまたは存在しなければhtmlを返す
// 値があればそれを取得する
var $target = $(href == "#" || href == "" ? 'html' : href);
// ボタンの位置の高さを取得する
// $('html').offset().topの値は0になる
var position = $target.offset().top;
// body,htmlは両方指定する
// positionで指定したスクロール位置に移動する
// animateで動作が完了するまでの速さ(speed)と動作パターン(swing)を指定する
$('body,html').animate({scrollTop:position}, speed, 'swing');
// イベントのデフォルト効果を打ち消す=関数内で指定した動作しか行わない
return false;
// event.preventDefault();
});
});
初心者メモ
return falseとは
デフォルトの動作を停止させる。
今回の場合、aタグのデフォルトの動きをしようとするので、それを打ち消さないと動作がおかしくなる。
preventDefault
とstopPropagation
を合わせたものらしい。
わかったようでわからないような・・・