スムーススクロールと上に戻るボタンを実装しましょう！
スムーススクロールとはページ内リンクを押した際に、すーっと移動するものです。
まずはページ内リンクを設定しておきましょう。
該当エリアに「ID」を振っておき、そこへaタグでリンクさせます。 <a href="#about">会社概要</a> <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> <p id="about">会社概要</p>
jQueryによるスムーススクロールの仕組み
もっとも単純化したスムーススクロールの実装は次のようになります。
（不完全な状態です！）
$(function () {
$("html, body").animate({scrollTop: 1000},500);
return false;
});
このような記述をすると、読み込んだ瞬間にスクロール位置が「上から1000px」の位置に移動します。
デモ
デモではクリックすると動作するようになります。
上記のソースで「500」となっているのは速度です。
return false; はアニメーション後に元の位置に戻らなくするために必要です。
上に戻るボタンの場合はスクロール位置 「0」の場所に移動すれば良いですし、
ページ内リンクの場合はリンク先の位置を調べてそのスクロール位置の値を入れてあげれば良いです。
コードにするとこのような形になります。
//aタグのうちページ内リンクの場合のみ発動する
$('a[href^="#"]:not([href="#"])').click(function () {
//リンク先の要素を取得する
var position = $($(this).attr("href")).offset().top;
//リンク先へアニメーションで飛ぶ
$("html, body").animate({scrollTop: position}, 500);
//アニメーションの移動先で止める
return false;
});
これでリンクをクリックしたら動くようになりました！
デモ
TOPに戻るボタンが途中で出現するようにする
TOPへ戻るボタンがある程度スクロールしてから出てくるものを見たことがないでしょうか？
デモを用意しました。→こちら
アニメーションはCSS、動作のきっかけはJavaScriptに分けています。
ハンバーガーメニューから始めるjQuery
スマホサイトにハンバーガーメニューを実装しよう！ スマホサイトを作った際にハンバーガーメニューによるメニュー表示の動作は欠かせません。 jQueryの使い方をスマホメニューの作り方から学んでいきましょう。 次のような動きのメニューを作成でき...
photogentle.com
2024.11.05
上記の記事とおなじ仕組みです
.top-btn {
transition: 1s;
transform:translate(0,200%);
}
.top-btn.active{
transform:translate(0,0);
}
上記でクラスが付いたらアニメーションが起きるようなじょうたいにしておきます。
JavaScriptは以下の通りです。
$(window).scroll(function () {
let scroll = $(window).scrollTop();
if (scroll > 300) {
$(".top-btn").addClass("active");
} else {
$(".top-btn").removeClass("active");
}
});
これで動作するようになります。
Just a moment...
codepen.io
