一定のスクロール後に「トップへ戻る」ボタンを表示させるサンプル【jQuery】
目次
パージ右下にトップへ戻るボタンを表示したい
レスポンシブ対応のサイトやランディングページ（LP）を制作するとページが長くなります。そんなときにページ右下に「ページトップに戻る」ボタンを設置したいのですが、ファーストビューから表示はしたくありません。
そんなときに見つけたの以下のページ。こちらでは、ある程度ページを下にスクロールしたらボタンを表示するようにでできるサンプルがありました。jQueryとCSSを使用する方法です。
参考ページ
単純にコピペではJSが動かなかった
上記のソースをそのままコピペ下だけでは動きませんでした。特に動作を制御するJSがうまく動きませんでした。Javascriptは外部から読み込むようにしたのですが、その際に$(document).ready(function() {～ });で囲ってやれば解決できました。
JS部分のサンプル
$(document).ready(function() {
//下から表示させる要素を指定
let $pagetop = $('.ScrollTop');
$(window).on( 'scroll', function () {
//スクロール位置を取得
if ( $(this).scrollTop() < 500 ) {
$pagetop.removeClass('isActive');
} else {
$pagetop.addClass('isActive');
}
});
//ページ内リンクスムーススクロール
$('a[href^="#"]').on('click', function () {
var href = $(this).attr("href");
var target = $(href == "#" || href == "" ? 'html' : href);
var position = target.offset().top;
$("html, body").animate({scrollTop: position}, 550, "swing");
return false;
});
});