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

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

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

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

解決済

wordpressでページ内・外問わずスムーズスクロールを実装したい

saku615
saku615

総合スコア20

WordPress

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

2回答

0評価

1クリップ

167閲覧

投稿2021/12/02 07:59

前提・実現したいこと

現在wordpressで簡単なHPを作成しております。

トップページにいくつかのコンテンツがあり、メニューの項目をクリックすると対応したコンテンツへスクロールするといった形を目指しています。

基本ペライチなのですが問い合わせフォームや新着情報などもありますので、それらの下層ページからもトップページのコンテンツへのリンクをスムーズに行えるようにしたいです。

またヘッダーが追従するようになっているので、ヘッダーの高さ分ずらせるようにもしたいです。

発生している問題・エラーメッセージ

wordpress内のメニューのカスタムリンクに「#hoge」といった形で仕込むとうまくスクロールするのですが、それだと下層ページから遷移できません。

なので「https://ページURL#hoge」のように仕込んだのですが、遷移はするもののスクロールせずに各コンテンツまで飛ぶようになってしまいました。トップページにいる状態でメニューをクリックしてもスクロールしません。

該当のソースコード

下記ページを参考にしました。
https://125naroom.com/web/3476

<script> jQuery(function(){ var headerHeight = jQuery('header').outerHeight(); var urlHash = location.hash; if(urlHash) { jQuery('body,html').stop().scrollTop(0); setTimeout(function(){ var target = jQuery(urlHash); var position = target.offset().top - headerHeight; jQuery('body,html').stop().animate({scrollTop:position}, 500);   }, 100); } jQuery('a[href^="#"]').click(function(){ var href= jQuery(this).attr("href"); var target = jQuery(href); var position = target.offset().top - headerHeight; jQuery('body,html').stop().animate({scrollTop:position}, 500); return false; }); }); </script>

試したこと

下記プラグインなども試してみましたがうまくいきませんでした。
https://www.hiskip.com/wp/plugin/ui/screen-scroll/22269.html

下記ページを参考に「$(window).on('load'」などをつけてもみましたがうまくいかず…
https://techmemo.biz/javascript/jquery-smooth-scroll-otherpage/

補足情報(FW/ツールのバージョンなど)

使用しているテーマはTCDのSwitchです。
https://tcd-theme.com/tcd063

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

Lhankor_Mhy

2021/12/03 01:24

ご提示のコードを試してみましたが、問題なく動作しました。 ですので、ご提示のコードには問題の原因がないと思われます。 ご提示いただいていない部分に原因があるのではないでしょうか(たとえば、別のスクリプトと衝突しているなど)。
saku615

2021/12/03 04:05

エラーコードなどを確認したのですが特にありませんでした…
Lhankor_Mhy

2021/12/03 04:08

「エラーコードなどを確認したのですが特にありませんでした…」とのことですが、これは当方の補足依頼に対する回答でしょうか? そうであれば、わかりにくい書き方で申し訳ないです。 当方の言いたいことは「エラーコードを出せ」というものではなくて、「もっとコードを出せ」です。 よろしくお願いいたします。
saku615

2021/12/03 04:22

もっとコードを出せとのことですが、使用しているテーマのどの部分のコードを出せばいいかご教示いただけますでしょうか? 基本的にこちら側で後から追加したスクリプトに関しては該当のソースコードに記載した部分のみになります。
Lhankor_Mhy

2021/12/03 04:29

先に申し上げた通り、「ご提示いただいていない部分に原因がある」までしかわかりません。 一般に、別のスクリプトとの衝突がある場合、どの部分のコードに原因があるかを具体的なコードを見ずに判断することは困難です。 --- > 基本的にこちら側で後から追加したスクリプトに関しては該当のソースコードに記載した部分のみになります わかりにくくて申し訳ありません。 当方で申し上げた「別のスクリプト」とは、「あなたが書いた別のスクリプト」という意味ではなくて、「あなたが書いたかどうかは関係なく、そのページで動作している別のスクリプト」という意味です。 --- >最も良いのは、現象を再現するためのミニマムなプログラムを改めて作ることです。そうすれば、貴方自身が現象と問題をより良く理解することにもつながるからです。 https://teratail.com/help/question-tips#questionTips3-5-1 --- 「現象を再現するためのミニマムなプログラム」をどうやって作るかですが、たとえば、以下の様な手順はどうですか? ① HTMLからフッターを削除してみて、それでも問題が再現するかどうか確認する。 ② ①で問題が再現しないのであればフッターに原因がある可能性があるので、フッター以外を削除してみる。 以下、①に戻って別の部分を削除するを繰り返す。 ③ ①で問題が再現するのであればフッターは関係ないので「現象を再現するための、より小さいプログラム」ができたことになる。以下、①に戻って別の部分を削除するを繰り返す。
Lhankor_Mhy

2021/12/03 05:05

もっと手っ取り早いのは、そのページのURLをご提示いただくことですが、これは無理な場合も多いので……
Lhankor_Mhy

2021/12/03 05:41

ご提示のテーマのデモページ( https://demo.tcd-theme.com/tcd063/ )にご提示のコードを追加して試してみましたが、問題なく動作しました。 つまり、ご提示のコードとテーマのコードには問題がなさそうです。 ご提示いただいていないプラグインや子テーマのコードに原因がありそうです。
saku615

2021/12/03 07:02

個人で持っている別のサーバーに同じテーマを設定し、提示したスクリプトを設置してみたのですが全く同じ挙動(同一ページ内だとスムーズが効かない、別ページから飛ぶとスムーズも効かずジャンプ先の位置もおかしい)になりますね… ちなみに下記のエラーが出ています。 TypeError: undefined is not an object (evaluating 'target.offset().top') こちらが再現したページになります。 https://ykworks.net/wp/
Lhankor_Mhy

2021/12/03 07:06

拝見しました。 undefined is not an object (evaluating 'target.offset().top') のエラーメッセージは再現しませんでした。エラーが出ているURLのフラグメント部分が存在しないアンカーである可能性があります。 また、スクロールの挙動ですが、一度アンカー部分までスクロールした後に、最上部へ戻っているようです。もう少し見てみます。
Lhankor_Mhy

2021/12/03 08:11

slick と競合しているようですね。

まだ回答がついていません

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

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

WordPress

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。