一定のスクロール後に「トップへ戻る」ボタンを表示させるサンプル【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; }); }); |