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

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

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

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

jQuery

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

HTML

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

CSS

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

Q&A

1回答

543閲覧

TOPページのみscrollTopが動かない

yytop

総合スコア20

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

jQuery

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

HTML

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

CSS

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

0グッド

0クリップ

投稿2020/01/28 01:02

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

WordPressでサイトを構築中で、TOPページのみページ上のTOPへ戻るためのscrollTopが効きません。(その他の複数の固定ページ上では動いています。)

CSSでhtmlやbodyにheight: 100vh;を指定するとよい、などの情報を見つけて試してみましたが、うまくいきませんでした。。

他の競合しているかもしれないJSファイルの読み込みをすべて停止してもだめでした。

デベロッパーツールでもエラーは出ていませんでした。

何か考えられるヒントだけでもいただけると嬉しいです。m(__)m

該当のソースコード

html

1<section class="page-top-scroll"> 2 <div class="pt-arrowWrap" id="pagetop"> 3 <div class="pt-arrowInner"> 4 <div class="pt-arrow"></div> 5 <p>PAGE TOP</p> 6 </div> 7 </div> 8</section> 9

css

1.page-top-scroll { 2 position: absolute; 3 right: 0; 4 bottom: 0; 5 z-index: 999; 6} 7 8.pt-arrowWrap { 9 position: absolute; 10 right: 0; 11 bottom: 30px; 12 width: 50px; 13 height: 150px; 14 z-index: 9; 15 cursor: pointer; 16} 17 18.pt-arrowInner p { 19 margin-top: 22px; 20 padding-bottom: 4px; 21 font-size: 16px; 22 letter-spacing: 0.1em; 23 text-align: home; 24 -webkit-transform: rotate(90deg); 25 transform: rotate(90deg); 26 white-space: nowrap; 27 color: #161542; 28} 29 30.pt-arrow { 31 width: 1px; 32 height: 60px; 33 margin: 0 auto; 34 background-color: #eee; 35 position: relative; 36} 37 38.pt-arrow::before { 39 content: ''; 40 width: 1px; 41 margin: 0 auto; 42 background-color: #000; 43 position: absolute; 44 bottom: 0; 45 left: 0; 46 -webkit-animation: arrow-up 2.5s ease 0s infinite normal; 47 animation: arrow-up 2.5s ease 0s infinite normal; 48} 49@-webkit-keyframes arrow-up { 50 0% { 51 height: 0; 52 } 53 54 60% { 55 height: 60px; 56 } 57 58 100% { 59 height: 60px; 60 } 61}

JavaScript

1jQuery.noConflict(); 2 (function($) { 3 $(function() { 4 $('#pagetop').click(function() { 5 $("html, body").animate({ scrollTop: 0 }, "slow"); 6 return false; 7 }); 8 }); 9 })(jQuery)

以上、PC・スマホの各種ブラウザでまったく動きませんので、環境のせいではなさそうです。
詳しい方、どうぞよろしくお願いいたします。m(__)m

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

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

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

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

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

guest

回答1

0

トップページのhtmlがわからないのでなんとも言えないですが、クリックイベントのターゲットとなっている#pagetopが複数指定されているとかはありませんか?

投稿2020/01/28 01:17

vnsa7221

総合スコア348

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

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

yytop

2020/01/28 01:35

早速ありがとうございます。 #pagetopを#pagetop2や#pagetopnewなどに変更してみましたが、やはり動きませんでした。。 それとTOPだけに読み込んでいるJSファイルがあるので、試しに全削除してもだめでした。 他は固定ページのソースと変わらないようなのですが。。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問