実現したいこと
スマホ時、ハンバーガーメニュー内のメニューを押して
各セクションに遷移した後に、右下にあるトップページに戻るボタン押して
トップページに戻るよう正常に作動させたい。
発生している問題・エラーメッセージ
①ハンバーガーメニューを押す
②メニューリンクを押す（トップページのセクションに遷移）
③右下のトップに戻るボタンを押す
→トップまで戻らない。
該当のソースコード
JavaScript
1export default () => {2 3 var beforePos = 0;//スクロールの値の比較用の設定4 5 //スクロール途中でヘッダーが消え、上にスクロールすると復活する設定を関数にまとめる6 function ScrollAnime() {7 var elemTop = $('#area-2').offset().top;//#area-2の位置まできたら8 var scroll = $(window).scrollTop();9 //ヘッダーの出し入れをする10 if (scroll == beforePos) {11 //IE11対策で処理を入れない12 } else if (elemTop > scroll || 0 > scroll - beforePos) {13 14 } else {15 16 }17 18 beforePos = scroll;//現在のスクロール値を比較用のbeforePosに格納19 }20 21 22 var head = $('.l-header');23 var timer;24 25 $(window).scroll(function () {26 //スクロール開始するとボタンを非表示27 head.addClass('is-active');28 29 //スクロール中はイベントの発火をキャンセルする30 clearTimeout(timer);31 32 //スクロールが停止して0.2秒後にイベントを発火する33 timer = setTimeout(function () {34 //スクロール位置を判定してページ上部のときはボタンを非表示にする35 if ($(this).scrollTop()) {36 // head.removeClass('is-display');37 head.removeClass('is-active');38 39 } else {40 head.removeClass('is-active');41 // head.addClass('is-display');42 }43 }, 300);44 });45 46 47 48 49 // 画面をスクロールをしたら動かしたい場合の記述50 $(window).scroll(function () {51 ScrollAnime();//スクロール途中でヘッダーが消え、上にスクロールすると復活する関数を呼ぶ52 });53 54 // ページが読み込まれたらすぐに動かしたい場合の記述55 $(window).on('load', function () {56 ScrollAnime();//スクロール途中でヘッダーが消え、上にスクロールすると復活する関数を呼ぶ57 });58 59 60 61 // フェードイン62 $(function () {63 const fade_bottom = 70; // 画面下からどの位置でフェードさせるか(px)64 const fade_move = 70; // どのぐらい要素を動かすか(px)65 const fade_time = 1500; // フェードの時間(ms)66 // フェード前のcssを定義67 $(".scroll-fade-up").css({68 opacity: 0,69 transform: "translateY(" + fade_move + "px)",70 transition: fade_time + "ms",71 });72 // スクロールまたはロードするたびに実行73 $(window).on("scroll load", function () {74 const scroll_top = $(this).scrollTop();75 const scroll_bottom = scroll_top + $(this).height();76 const fade_position = scroll_bottom - fade_bottom;77 $(".scroll-fade-up").each(function () {78 const this_position = $(this).offset().top;79 if (fade_position > this_position) {80 $(this).css({81 opacity: 1,82 transform: "translateY(0)",83 });84 }85 });86 });87 });88 89 90 // トップに戻る91 $(function () {92 $("#js-pagetop").click(function () {93 $('html, body').animate({94 scrollTop: 095 }, 300);96 });97 $(window).scroll(function () {98 if ($(window).scrollTop() > 1) {99 $('#js-pagetop').fadeIn(300).css('display', 'flex')100 } else {101 $('#js-pagetop').fadeOut(300)102 }103 });104 });105 106 107 $(function () {108 var btn = $('.button');109 var timer;110 111 $(window).scroll(function () {112 //スクロール開始するとボタンを非表示113 btn.removeClass('is-active');114 115 //スクロール中はイベントの発火をキャンセルする116 clearTimeout(timer);117 118 //スクロールが停止して0.2秒後にイベントを発火する119 timer = setTimeout(function () {120 //スクロール位置を判定してページ上部のときはボタンを非表示にする121 if ($(this).scrollTop()) {122 btn.addClass('is-active');123 } else {124 btn.removeClass('is-active');125 }126 }, 200);127 });128 129 //ボタンクリックでトップへ戻る130 btn.on('click', function () {131 $('body,html').animate({132 scrollTop: 0133 });134 });135 });136 137 $(function () {138 $('.l-nav__mega-inner ul li a').on('click',function() {139 $('html').removeClass('is-nav-active');140} );141 });142}143
補足情報（FW/ツールのバージョンなど）
不要な記述も多いのですが、ご確認いただけますと幸いです。
0 コメント