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

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

ただいまの
回答率

90.62%

  • jQuery

    6525questions

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

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

受付中

回答 3

投稿

  • 評価
  • クリップ 0
  • VIEW 3,056

yusuke_11

score 2

実装したい内容・問題点

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

使用したコード

<header><div id="header1"></div></header>
<p id="pageTop"><a href="#header1"><i class="fa fa-chevron-up"></i></a></p>
$(document).ready(function() {
  var pagetop = $('.pagetop');
    $(window).scroll(function () {
       if ($(this).scrollTop() > 0) {
            pagetop.fadeIn();
       } else {
            pagetop.fadeOut();
            }
       });
       pagetop.click(function () {
           $('body, html').animate({ scrollTop: 0 }, 500);
              return false;
   });
});
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

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

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

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

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

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

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

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

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3

+3

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/09/26 18:53

    失礼しました…
    ただ、そこを修正してもうまくスクロールはされませんでした

    ほか何か心当たりがあればぜひご教授いただきたいです

    キャンセル

  • 2017/09/26 19:00

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

    キャンセル

  • 2017/09/26 19:04

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

    キャンセル

  • 2017/09/26 19:09

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

    キャンセル

  • 2017/09/27 12:01

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

    キャンセル

  • 2017/09/27 12:02

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

    キャンセル

  • 2017/09/27 17: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 17:52

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

    キャンセル

  • 2018/07/23 23:43

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

    キャンセル

+2

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

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <title>タイトル</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        header {
            height: 1500px;
            background: #ffdb00;
        }
    </style>
</head>
<body>
<header>
    <div id="header1"></div>
</header>
<p id="pageTop">
    <a href="#header1">
        <i class="fa fa-chevron-up"></i>
    </a>
</p>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
    $(function () {
        var pagetop = $("#pageTop");// クラスではなくidで、page"T"op
        $(window).scroll(function () {
            if ($(this).scrollTop() > 0) {
                pagetop.fadeIn();
            } else {
                pagetop.fadeOut();
            }
        });
        pagetop.click(function () {
            $("html,body").animate({scrollTop: 0}, 500);

            return false;
        });
    });
</script>
</body>
</html>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/09/26 19:28

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

    キャンセル

  • 2017/09/26 20:36

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

    キャンセル

  • 2017/09/26 20:39 編集

    pagetop.click(function () {
    console.log('click'); // <= コンソールを出す
    });

    これを書いて、これが実行されると
    デベロッペーツール、開発者ツール、検証 で出てくるウィンドウ の console というウィンドウに click と文字列が表示されます。

    キャンセル

  • 2017/09/26 20:45 編集

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

    キャンセル

  • 2017/09/26 21:04 編集

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

    キャンセル

  • 2017/09/27 17: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

    キャンセル

  • 2017/09/27 17:52 編集

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

    キャンセル

  • 2017/09/27 17:58

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

    キャンセル

  • 2017/09/27 18:06 編集

    index.html:1 GET http://127.0.0.1:49899/fonts/UtsukushiFONT.woff net::ERR_ABORTED <= これはなんかhttprequest失敗してフォント取れてないということです

    キャンセル

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

  • ただいまの回答率 90.62%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

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

  • jQuery

    6525questions

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