質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.44%
WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

1回答

142閲覧

ワードプレスのjQueryでUncaught ReferenceError: Cannot accessのエラーが発生した対処法

yosuke1025

総合スコア9

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2024/05/24 07:23

実現したいこと

以下の模写元サイトの通りにfooterの右上にあるページトップボタンがあり、下へスクロールするとページトップボタンが表示されてfooterの右上に止まるようになっています。
・下へスクロールするとページトップボタンが表示された
イメージ説明
⬇︎
・footerの上にページトップボタンが止まる
イメージ説明
模写元サイト:https://www.delights-home.jp/contact

私の場合は
ずっとfooterの右上にページトップボタンが固定されたままになっている。
検証で原因を確認するとjsに以下のようなエラーメッセージが表示されました。
イメージ説明
それをクリックしてみると「swiper」にエラーが起きているようですのでそれを解消したい。
イメージ説明

該当のソースコード

jQuery

1 2/*スクロールに合わせてヘッダーサイズの変化*/ 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/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2024/05/24 14:42

コメントにて「ベストアンサーに選ばせていただきました。」と書かれていますが、解決済みになっていないようです。
guest

回答1

0

typoですね。大文字のSです。

js

1const swiper = new Swiper('.swiper', {

https://swiperjs.com/get-started#initialize-swiper

投稿2024/05/24 07:32

Lhankor_Mhy

総合スコア36272

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yosuke1025

2024/05/24 07:41

回答ありがとうございます。 試したところ問題が解決しました! ベストアンサーに選ばせていただきました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.44%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問