スムーススクロールとフローティングアイテムの実装方法【jQuery】
こんにちは！スズキです。
今回はスムーススクロールとフローティングアイテムの実装方法を紹介します。
スムーススクロールとは、ページ内をするすると移動する動きのことです。
フローティングアイテムとは、ふわっと表示される要素のことです。
この2つを使えば、「トップへ戻るボタン」を作ることができます。
この記事では、「トップへ戻るボタン」と「ページ内リンクボタン」を作ります。
記事の内容
- jQueryの読み込み
- コーディング
スポンサードサーチ
jQueryの読み込み
まずは、jQueryの読み込みをしておきます。
以下のコードをコピペしてください。
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>読み込みができたら、CSSファイルとjsファイルも準備しておきましょう。
コーディング
まずはサンプルを確認してください。
HTML
<!-- ページ内リンクボタン -->
<div class="btn-items">
<a href="#test1" class="btn">test1へ移動</a>
<a href="#test2" class="btn">test2へ移動</a>
<a href="#test3" class="btn">test3へ移動</a>
</div>
<!-- トップへ戻るボタン（フローティングボタン） -->
<div class="floating">
<a href="" class="btn">トップへ移動</a>
</div>
<!-- リンク先 -->
<div id="test1">
<h2>test1</h2>
</div>
<div id="test2">
<h2>test2</h2>
</div>
<div id="test3">
<h2>test3</h2>
</div>まずは、HTMLです。
リンク先にidを設定しましょう。
そして、リンク元ボタンのhrefにリンク先のidを設定します。
この時、”#”をつけるのを忘れないようにしましょう。
CSS
特に設定することはありません。
ボタンのスタイルを作りましょう。
jQuery
最後にjQueryです。
まずは、ページ内リンクボタンを見てみましょう。
// ページ内リンクボタン
$(function(){
// #で始まるリンクをクリックしたら実行
$('a[href^="#"]').click(function() {
// スクロールの速度
var speed = 500; // ミリ秒で記述
// アンカーの値取得
var href= $(this).attr("href");
// 移動先の取得
var target = $(href == "#" || href == "" ? 'html' : href);
// 移動先を数値で取得
var position = target.offset().top;
// ここでスムーススクロール
$('body,html').animate({scrollTop:position}, speed, 'swing');
return false;
});
});詳しくはコメントの通りです。
簡単に流れを説明すると、まずスクロールの速度とリンク先までの距離を設定、取得します。
それらを、animate()に引数として渡すことで、スムーススクロールを実装しています。
次にフローティングボタンです。
// フローティングボタン
$(function(){
// ボタンを表示するタイミング
$(window).on("scroll", function(){
if ($(this).scrollTop() > 100) { /* 100以上スクロールされた時 */
$(".floating").fadeIn("fast"); /* 表示 */
} else {
$(".floating").fadeOut("fast"); /* 非表示 */
}
});
// ここでスムーススクロール
$(".floating").click(function(){
$('body,html').animate({
scrollTop: 0 /* 一番上まで移動 */
}, 500, 'swing');
return false;
});
});こちらもコメントの通りです。
if文でボタンを表示するタイミングを設定し、fadeInとfadeOutで表示・非表示を切り替えています。
スムーススクロールは先ほどと同じです。
scrollTopを0にすることで、一番上まで移動します。
スポンサードサーチ
まとめ
いかがでしたか。
ライブラリを使わなくても、「トップへ戻るボタン」「ページ内リンクボタン」を実装することができました。
コピペでも使えますので、試してみてください。
以上です。
コーディングを学ぶならデイトラ
動画でプログラミングを学ぶなら
オンラインスクールでプログラミングを学ぶなら