実現したいこと
以下の模写元サイトの通りにfooterの右上にあるページトップボタンがあり、下へスクロールするとページトップボタンが表示されてfooterの右上に止まるようになっています。
・下へスクロールするとページトップボタンが表示された
⬇︎
・footerの上にページトップボタンが止まる
模写元サイト：https://www.delights-home.jp/contact
私の場合は
ずっとfooterの右上にページトップボタンが固定されたままになっている。
検証で原因を確認するとjsに以下のようなエラーメッセージが表示されました。
それをクリックしてみると「swiper」にエラーが起きているようですのでそれを解消したい。
該当のソースコード
jQuery
12/*スクロールに合わせてヘッダーサイズの変化*/ 3jQuery(function(){ 4 jQuery(window).on('load scroll', function() { 5 var scrollPos = jQuery(this).scrollTop(); 6 if ( scrollPos > 100 ) { 7 jQuery('header').addClass('is-animation'); 8 } else { 9 jQuery('header').removeClass('is-animation'); 10 } 11 }); 12}); 13 14 15jQuery(function() { 16 // ウィンドウをスクロールしたら… 17 jQuery(window).scroll(function() { 18 // ウィンドウの高さを取得 19 const wHeight = jQuery(window).height(); 20 // スクロールした量を取得 21 const wScroll = jQuery(window).scrollTop(); 22 // それぞれのblockクラスに対して… 23 jQuery(".fadeInTrigger").each(function () { 24 // それぞれのblockクラスのウィンドウからの高さを取得 25 const bPosition = jQuery(this).offset().top; 26 // スクロールした量が要素の高さを上回ったら 27 // その数値にウィンドウの高さを引き、最後に200pxを足す 28 if (wScroll > bPosition - wHeight + 200) { 29 jQuery(this).addClass("fadeIn"); 30 } 31 }); 32 }); 33}); 34 35 36jQuery(function(){ 37 jQuery(window).on('load scroll', function() { 38 jQuery(".show").each(function() { 39 var winScroll = jQuery(window).scrollTop(); 40 var winHeight = jQuery(window).height(); 41 var scrollPos = winScroll + (winHeight * 0.8); 42 if(jQuery(this).offset().top < scrollPos) { 43 jQuery(this).css({opacity: 1, transform: 'translate(0, 0)'}); 44 } 45 }); 46 }); 47}); 48 49let targets = document.querySelectorAll('.js-scroll-animation'); //アニメーションさせたい要素 50//スクロールイベント 51window.addEventListener('scroll', function () { 52 var scroll = window.scrollY; //スクロール量を取得 53 var windowHeight = window.innerHeight; //画面の高さを取得 54 for (let target of targets) { //ターゲット要素がある分、アニメーション用のクラスをつける処理を繰り返す 55 var targetPos = target.getBoundingClientRect().top + scroll; //ターゲット要素の位置を取得 56 if (scroll > targetPos - windowHeight) { //スクロール量 > ターゲット要素の位置 57 target.classList.add('is-animated'); //is-animatedクラスを加える 58 } 59 } 60}); 61 62 63/*ハンバーガーメニュー*/ 64jQuery(function(){ 65 jQuery('.menu').on('click',function(){ 66 jQuery('.menu__line').toggleClass('active'); 67 jQuery('.gnav').fadeToggle(); 68 }); 69}); 70 71 72/*WORKSのswiper*/ 73const swiper = new swiper(".swiper", { 74 speed:4000, 75 autoplay:{ 76 delay:5000, 77 disableOnInteraction: false, 78 } 79});//スライダーを包む要素のクラス名を入れる 80 81 82 83 84/*ページトップへスクロールし戻る*/ 85jQuery(function() { 86 const pageTop = jQuery("#page-top"); 87 pageTop.hide(); 88 jQuery(window).scroll(function() { 89 if (jQuery(this).scrollTop() > 100) { 90 pageTop.fadeIn(); 91 } else { 92 pageTop.fadeOut(); 93 } 94 }); 95 pageTop.click(function() { 96 jQuery("body,html").animate( 97 { 98 scrollTop: 0, 99 }, 100 500 101 ); 102 return false; 103 }); 104 // フッター手前でストップ 105 jQuery(document).ready(function () { 106 jQuery("#page-top").hide(); 107 jQuery(window).on("scroll",function(){ 108 scrollHeight = jQuery(document).height(); //ドキュメントの高さ 109 scrollPosition = jQuery(window).height() + jQuery(window).scrollTop(); //現在の位置 110 footHeight = jQuery(".js-footer-wrap").innerHeight(); //フッターの高さ 111 if (scrollHeight - scrollPosition <= footHeight) { //ドキュメントの高さと現在の位置の差がフッターの高さ以下のとき 112 jQuery("#page-top").css({ position: "absolute", bottom: footHeight + 0 }); //pisitionをabsoluteに変更 113 } else { //それ以外の場合は 114 jQuery("#page-top").css({ position: "fixed", bottom: "0" }); //固定で表示 115 } 116 }); 117 }); 118});
試したこと
ここに問題に対して試したことを記載してください。
補足情報（FW/ツールのバージョンなど）
ここにより詳細な情報を記載してください。
0 コメント