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

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

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

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

Q&A

3回答

5803閲覧

ページトップにスクロールできません

yusuke_11

総合スコア10

jQuery

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

0グッド

0クリップ

投稿2017/09/26 09:32

#実装したい内容・問題点
・jQueryを用いてページの一番上までスクロールするボタンを作成したい
https://syncer.jp/jquery-to-top-buttonhttps://kowappa.com/10を参考にしたが、aタグの内容を読み込むだけでスクロールしない
・スクロールに応じてボタンを表示させる機能は必要ないが、トップへのスクロールは実装したい
・何が問題かわからないので、動かない心当たりがあれば教えていただきたいです

#使用したコード

lang

1<header><div id="header1"></div></header> 2<p id="pageTop"><a href="#header1"><i class="fa fa-chevron-up"></i></a></p>

lang

1$(document).ready(function() { 2 var pagetop = $('.pagetop'); 3 $(window).scroll(function () { 4 if ($(this).scrollTop() > 0) { 5 pagetop.fadeIn(); 6 } else { 7 pagetop.fadeOut(); 8 } 9 }); 10 pagetop.click(function () { 11 $('body, html').animate({ scrollTop: 0 }, 500); 12 return false; 13 }); 14});

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

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

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

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

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

guest

回答3

0

var pagetop = $('.pagetop');セレクタが間違っています。

<p id="pageTop">とあるので、正しくは$('#pageTop')ではないでしょうか。

投稿2017/09/26 09:37

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

yusuke_11

2017/09/26 09:53

失礼しました… ただ、そこを修正してもうまくスクロールはされませんでした ほか何か心当たりがあればぜひご教授いただきたいです
退会済みユーザー

退会済みユーザー

2017/09/26 10:00

.animate({ scrollTop: 0 } とあるので、ページ最上部に移動するだけなら <a href="#header1"></a> は不要です。削除したら動きませんか?
退会済みユーザー

退会済みユーザー

2017/09/26 10:04

提示のコードで試してみたら、セレクタを修正しただけで動作しました。
yusuke_11

2017/09/26 10:09

動かないです… 上にbackgroundimgを用いたスライダー等を設置しているのですが、それらの要素が原因でスクロールされないといったことはあり得ますか?
退会済みユーザー

退会済みユーザー

2017/09/27 03:01

jQueryプラグインで設置しているスライダーであれば影響することはまず無いはずです。 CSSでhtml,bodyにoverflowやheightが指定されている場合、スクロール系でバグが起こりやすいようです。 一度全てのCSSを外して(<link rel="stylesheet" href="">を一時的にコメントアウトして)から試してみてください。
退会済みユーザー

退会済みユーザー

2017/09/27 03:02

また、そもそも正常にクリックイベントが発火しているのかも確認した方が良いです。.click(function(){ の中にconsole.log()などで出力してみてください。
yusuke_11

2017/09/27 08:46

cssを消しても動きませんでした consoleの結果は以下のようなものでした Uncaught SyntaxError: Unexpected end of input index.html:1 GET http://127.0.0.1:49899/fonts/UtsukushiFONT.woff net::ERR_ABORTED index.html:48 Uncaught TypeError: $(...).slideUp is not a function at HTMLHtmlElement.<anonymous> (index.html:48) at HTMLHtmlElement.dispatch (jquery-3.2.1.slim.min.js:3) at HTMLHtmlElement.q.handle (jquery-3.2.1.slim.min.js:3) (anonymous) @ index.html:48 dispatch @ jquery-3.2.1.slim.min.js:3 q.handle @ jquery-3.2.1.slim.min.js:3
退会済みユーザー

退会済みユーザー

2017/09/27 08:52

シンタックスエラーが出てますので、エラーを修正するのが先決です。 >Unexpected end of input ()や{}の閉じ忘れがあるのでは?
cheche0830

2018/07/23 14:43

まずは一旦pagetopに必要なコードだけのこしてあとは削除。それで試してみましょう。 たぶん他のエラーで今は全部止まっています
guest

0

idセレクタで指定するべきところをclassセレクタで指定しているからではないでしょうか(具体的な箇所は下記のコードにコメントで書いてあります)。一度キャッシュの消去を行ったうえで以下のコードを実行してみていただけませんか?

HTML

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> 6 <title>タイトル</title> 7 <style type="text/css"> 8 * { 9 margin: 0; 10 padding: 0; 11 } 12 13 header { 14 height: 1500px; 15 background: #ffdb00; 16 } 17 </style> 18</head> 19<body> 20<header> 21 <div id="header1"></div> 22</header> 23<p id="pageTop"> 24 <a href="#header1"> 25 <i class="fa fa-chevron-up"></i> 26 </a> 27</p> 28<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 29<script> 30 $(function () { 31 var pagetop = $("#pageTop");// クラスではなくidで、page"T"op 32 $(window).scroll(function () { 33 if ($(this).scrollTop() > 0) { 34 pagetop.fadeIn(); 35 } else { 36 pagetop.fadeOut(); 37 } 38 }); 39 pagetop.click(function () { 40 $("html,body").animate({scrollTop: 0}, 500); 41 42 return false; 43 }); 44 }); 45</script> 46</body> 47</html>

投稿2017/09/26 13:25

s8_chu

総合スコア14731

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

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

0

$('body, html') -> $('html') または $('body') とするとどうですか?
return false; 消すとどうですか?

投稿2017/09/26 10:27

kimurayu

総合スコア158

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

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

kimurayu

2017/09/26 10:28

pagetop.click(function () { console.log('click') でコンソール出ますか?
yusuke_11

2017/09/26 11:36

申し訳ありません、使い方が調べてもわかりませんでした 初歩的で申し訳ないのですが、そちらの使い方をご教授願えませんでしょうか
kimurayu

2017/09/26 11:40 編集

pagetop.click(function () { console.log('click'); // <= コンソールを出す }); これを書いて、これが実行されると デベロッペーツール、開発者ツール、検証 で出てくるウィンドウ の console というウィンドウに click と文字列が表示されます。
kimurayu

2017/09/26 11:45 編集

クリックされた時に実行される関数でコンソールを出しているので、コンソールが出るかどうかで、クリックが反応しているかどうかを確認できます
kimurayu

2017/09/26 12:04 編集

右クリックメニューの 検証、要素の検査 などで開けます command + alt + i 、 Ctrl + Shift + i などのいずれかでも開けます
yusuke_11

2017/09/27 08:45

お返事が遅くなり申し訳ありません。 以下のように表示されました Uncaught SyntaxError: Unexpected end of input index.html:1 GET http://127.0.0.1:49899/fonts/UtsukushiFONT.woff net::ERR_ABORTED index.html:48 Uncaught TypeError: $(...).slideUp is not a function at HTMLHtmlElement.<anonymous> (index.html:48) at HTMLHtmlElement.dispatch (jquery-3.2.1.slim.min.js:3) at HTMLHtmlElement.q.handle (jquery-3.2.1.slim.min.js:3) (anonymous) @ index.html:48 dispatch @ jquery-3.2.1.slim.min.js:3 q.handle @ jquery-3.2.1.slim.min.js:3
kimurayu

2017/09/27 08:59 編集

index.html:48 Uncaught TypeError: $(...).slideUp is not a function ↑これは48行目でエラー発生ということです 多分$(...) <= これがおかしいです
kimurayu

2017/09/27 08:58

Uncaught SyntaxError: Unexpected end of input これはどこか括弧が綴じられていないかもしれません
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問