ページのトップに行くjavascriptが滑らかに動いてくれないのはなぜ？

Question

ページのトップに行くjavascriptが滑らかに動いてくれないのはなぜ？

解決済

回答 1

投稿 2018/11/10 14:12 ・編集 2018/11/10 20:58

評価
クリップ 1
VIEW 836

chamaki40

score 13

下記のようにページのフッターに矢印でトップまで戻る(アンカーポイント)スクリプトを設定しました。
参考サイトでは滑らかに動いていましたが、自分のサイトに設置したらトップボタンを押すといきなりトップに戻り、滑らかに上に進みません。　なぜでしょうか？
ヘッダー部分に下記のスクリプトをリンクさせており、制御されてしまっているのか分かりませんが
スムーズに動かす方法教えてください　非常に初級の問題かと思いますが

<!-- Include jQuery Library -->
        <link rel="stylesheet" href="css/reset.css" type="text/css" charset="utf-8" />
        <link rel="stylesheet" href="css/style.css" type="text/css" charset="utf-8" />
        <link href="css/sandbox.css" rel="stylesheet">
        <link href="dist/css/drawer.css" rel="stylesheet">

        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
          <script src="https://cdnjs.cloudflare.com/ajax/libs/iScroll/5.2.0/iscroll.js"></script>
          <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
          <script src="dist/js/drawer.min.js" charset="utf-8"></script>
  <script>
    $(document).ready(function() {
      $('.drawer').drawer();
    });
  </script>

//トップに戻る 
<a href="#" id="return-top">Top</a>

function topButton(elmId, duration) {

    //トップに戻るボタンの要素の取得
    var topButton = document.getElementById(elmId);

    topButton.addEventListener("click", function(e){

        //デフォルトの動作の制御
        e.preventDefault();

        var begin = new Date() - 0;
        var yOffset = window.pageYOffset;
        var timer= setInterval(function() {
            var current = new Date() - begin;
            if (current > duration) {
                clearInterval(timer);
                current = duration;
            }

            //スクロール位置を単位時間で変更する
            window.scrollTo(0, yOffset * (1 - current / duration)) 
        }, 10);
    }, false)

}

// 使用例 トップに戻るボタンの id とアニメーションにかかる時間をミリ秒で指定
topButton("return-top", 300)

全体のソースは以下になります

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" name="viewport">
  <meta name="keywords" content="セカンドライフ,デイトレード,アービトラージ,錬金術,投資">
  <meta name="description" content="コンシェルジュ、株、為替">
<link rel="SHORTCUT ICON" HREF="">
<title>セカンドライフ｜賢者への道</title>

<!-- Include jQuery Library -->
        <link rel="stylesheet" href="css/reset.css" type="text/css" charset="utf-8" />
        <link rel="stylesheet" href="css/style.css" type="text/css" charset="utf-8" />
        <link href="css/sandbox.css" rel="stylesheet">
        <link href="dist/css/drawer.css" rel="stylesheet">

        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
          <script src="https://cdnjs.cloudflare.com/ajax/libs/iScroll/5.2.0/iscroll.js"></script>
          <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
          <script src="dist/js/drawer.min.js" charset="utf-8"></script>
  <script>
    $(document).ready(function() {
      $('.drawer').drawer();
    });
  </script>

  <script src="js/scroll.js" type="text/javascript"></script>



</head>
<body class="drawer drawer--top drawer--navbarTopGutter">


<header class="drawer-navbar drawer-navbar--fixed" role="banner">
    <div class="drawer-container">
      <div class="drawer-navbar-header">
        <a class="drawer-brand" href="./index.html"><img src="img/top_logo.gif" alt="セカンドライフ"></a>
        <button type="button" class="drawer-toggle drawer-hamburger">
          <span class="sr-only">toggle navigation</span>
          <span class="drawer-hamburger-icon"></span>
        </button>
      </div>
      <nav class="drawer-nav" role="navigation">
        <ul class="drawer-menu">
          <li><a class="drawer-menu-item" href="index.html">セカンドライフとは？</a></li>
          <li><a class="drawer-menu-item" href="beginner.html">お金を増やす方法</a></li>
          <li><a class="drawer-menu-item" href="gainer.html">スマホで収入</a></li>
          <li class="drawer-dropdown">
            <a class="drawer-menu-item" data-target="#" href="example.html" data-toggle="dropdown" role="button" aria-expanded="false">
              トークアプリを使った実用例<span class="drawer-caret"></span>
            </a>
            <ul class="drawer-dropdown-menu">
              <li><a class="drawer-dropdown-menu-item" href="./active.html">初級者向け</a></li>
              <li><a class="drawer-dropdown-menu-item" href="./active_2.html">中級者向け</a></li>
              <li><a class="drawer-dropdown-menu-item" href="./active_3.html">上級者向け</a></li>
            </ul>
          </li>

          <li class="drawer-dropdown">
            <a class="drawer-menu-item" href="#" data-toggle="dropdown" role="button" aria-expanded="false">
              自己診断チェック <span class="drawer-caret"></span>
            </a>
            <ul class="drawer-dropdown-menu">
              <li><a class="drawer-dropdown-menu-item" href="./check.html">チェックリストその１</a></li>
              <li><a class="drawer-dropdown-menu-item" href="./check_2.html">チェックリストその２</a></li>
            </ul>
          </li>
        </ul>
      </nav>


    </div>

</header>


  <main role="main">
    <!-- Page content -->



                <div id="head_1"><img src="img/for_sitetop2.jpg" alt="サイトイメージ"></div>

                <div id="container">


                <div id="left">

                <h1>2020年以降、副業が「本業」を超える時代になる&nbsp;&nbsp;&nbsp;&nbsp;</h1>

                <div class="text">
                よくセミリタイア、不労所得で余生を満喫するなどといいますが、近年、この「セミリタイア」
                という言葉が、若年層にも浸透しつつあります。　それはなぜでしょうか？<br>
                仕事以外にも収入を得る手段が増えたからです。　<br> テレビやネットなど見ると、「AI」「VR」「IPO」「BTC」などとアルファベットのキーワードを目にしますが、これらは現代の市場を反映しています。通信、商業、物流関係の仕事などは年々オートメーション化して、人とのコンタクト、在庫管理、商品を出荷する仕組み、そして金融市場においては「仮想通貨」という新しいネット上の通貨が生まれて、人々は資金作りに有益な情報を得ることができる時代となりました。　
                <br>そしてその情報を得る手段の一つとしてソーシャルネットワークも進化してきています。　
                個人のユーザーが少額の資金でも始められる投資商品があるとか、トレンドを載せてどの銘柄を購入したらいいか解説している実践的な方もいたりします。</div>

<h1>身の丈に合う稼ぎ方&nbsp;&nbsp;&nbsp;&nbsp;</h1>

<div class="photo_2"><img src="img/charge.jpg" alt="チャージ"></div>


<div class="text">
日本では10年ほど前にITバブルという時代がありました。
若手のベンチャー起業家たちがIPOを目指し、立派なオフィスビルに事務所を構えて、わずか数人程度の規模でも年商数億円という企業がざらにありました。　

<br>
しかし、そんなバブルも長くは続かず、あの一大事件となった「リーマンショック」を境に経済的な大ダメージを負った企業は
倒産を余儀なくされました。　
<br>
人は一度、大金を持つと簡単に浪費してしまう人と「増やす」ことができる人に分かれます。
今回は、まず大金を得る前に種銭から稼ぎたいという方へ<span><a href="">スマホを使って収入が得られる方法</a></span>をご紹介します。

<br><br>
「お小遣いが稼げる」「～で金儲け」と聞いて、胡散くさいイメージしかない方も沢山いるかと思います。<br>
現実問題、メディアや書籍など多くの大金を稼いだというノウハウ本には、著者やその周りにいる方々の成功例を
取り上げているだけであって、人がそれを実践しようとしても失敗する可能性の方が確実に高いからです。

<br><br>もし、あなたが今まで接客業のスペシャリストで、これから独立しようと思ったときに全く業界経験のない不動産会社を立ち上げようとは思わないはずです。　つまり、自分のやってきたこと、学んできたことに近い業界で起業するのが合理的で時間を無駄にすることはありません。　
もちろん、中には自分の経歴とは全く関係のない仕事で生計を立てて成功した方もいます。
しかし、それは努力や環境が大きく影響します。　一般的には自分にあった仕事で稼ぐことが収入を上げる近道と言えます。



</div>


<h1>メディアにまどわされないために&nbsp;&nbsp;&nbsp;&nbsp;</h1>

<div class="text">
2017年末から今年の初めにかけて、仮想通貨の相場が1ビットコインで100万円となり、その時期に売買をして儲けた方を
「億り人」という流行語が一時ありました。　その煽りに便乗して「ビットコインで一発当てよう」「所持金を全て投資しよう」と
始めた方も少なくはないはずです。　しかし、これは非常に安易な行動です。何も知識がないうちにただ人が儲けていることを
知って、自分でも同じように儲けることができると思ったら非常に打算的な考えです。　
<br>
なぜなら、仮想通貨に限らず株や為替などで利益を出している人は少なからず書籍や情報を吸収して知識を得ている方か、指南する
投資のエキスパートがいるものです。　どんなことを始めるにも同じことが言えますが、最初から「成功者」の過程を知らずに結果だけを
求めるだけでは物事はうまくいきません。　


</div>


<h1>AI時代、需要がある職業はコレだ&nbsp;&nbsp;&nbsp;&nbsp;</h1>

<dl id="top_work">
    <dt><img src="img/programmer_3.jpg" alt="プログラマー"></dt>
    <dd>SE・プログラマー</dd>
</dl>

<dl id="top_work">
    <dt><img src="img/consultant.jpg" alt="コンサルタント"></dt>
    <dd>ITコンサルタント</dd>
</dl>

<dl id="top_work">
    <dt><img src="img/trade_2.jpg" alt="投資家"></dt>
    <dd>投資家</dd>
</dl>

<dl id="top_work">
    <dt><img src="img/youtuber_2.jpg" alt="ユーチューバー"></dt>
    <dd>ユーチューバー</dd>
</dl>



</div>

<div id="right">
<h2>副業コンシェルジュについて</h2>

<div class="ban_1"><a href="merit.html"><img src="img/bitcoin_ban.jpg" alt="ビットコインバナー"></a></div>

<h3>副業コンシェルジュにご相談頂くメリット</h3>

 <ul id="merit">
     <li>統計を元に稼ぐ仕組みを学べる</li>
    <li>トークアプリを使用して収益が得られる</li>
    <li>あなたに合った副収入のノウハウが分かる</li>
    <li>大きなリスクがない</li>
 </ul>

<h2>LINEを有効活用する副業</h2>

<dl>
    <dt><a href="#"><img src="img/line_ban.jpg" alt="トークアプリ"></a></dt>
    <dd><a href="">通知を受け取るだけの簡単ビジネス</a></dd>
</dl>

</div>


</div>


  </main>



<!-- フッタ -->

<footer>

<ul id="nav_2">
<li><a href="index.html">HOME |</a></li>
<li><a href="beginner.html"> |</a></li>
<li><a href="gainer.html">賢い稼ぎ方 |</a></li>
<li><a href="active.html"> トークアプリを使った実用例|</a></li>
<li><a href="check.html">自己診断チェック |</a></li>
<li><a href="contact.html">お問い合わせ |</a></li>
</ul>

<copyright>Copyright 2018 second life </copyright>
</footer>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
<div class="drawer-overlay drawer-toggle"></div>

<a href="#" id="return-top">Top</a>

</body>
</html>

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

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

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

クリップを取り消します
良い質問の評価を上げる

以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します

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

評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 過去に投稿した質問と同じ内容の質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します

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

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

評価を下げる理由を選択してください
プログラミングに関係のない質問やってほしいことだけを記載した丸投げの質問問題・課題が含まれていない質問意図的に内容が抹消された質問過去に投稿した質問と同じ内容の質問広告と受け取られるような投稿
詳細な説明はこちら

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

この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
- メールアドレスの認証
  メールアドレスの認証
- 質問評価に関するヘルプページの閲覧
  質問評価に関するヘルプページの閲覧

11 件の質問への追記・修正依頼

質問への追記・修正、ベストアンサー選択の依頼

m.ts10806

2018/11/10 14:14

topButton ()が実行されていることはデバッグ確認されたのでしょうか？

topButton ()が実行されていることはデバッグ確認されたのでしょうか？

キャンセル
chamaki40

2018/11/10 14:18

それはどういう意味ですか？　現状スクリプトがあってもなくても上に進むだけの状態です

それはどういう意味ですか？　現状スクリプトがあってもなくても上に進むだけの状態です

キャンセル
m.ts10806

2018/11/10 14:37

topButton ()というメソッドが実行されていることは確認しましたか？という確認です。console.log()を利用してブラウザデベロッパーツールのコンソールに出力して、想定の処理をきちんと通っているか確認してください。きちんと処理を通ってないと想定の動きにはなりませんよね？

topButton ()というメソッドが実行されていることは確認しましたか？という確認です。console.log()を利用してブラウザデベロッパーツールのコンソールに出力して、想定の処理をきちんと通っているか確認してください。きちんと処理を通ってないと想定の動きにはなりませんよね？

キャンセル
m.ts10806

2018/11/10 14:38 編集

デバッグ方法について→ https://qiita.com/snoguchi/items/8f6bb62a3166eca23ac3

デバッグ方法について→ https://qiita.com/snoguchi/items/8f6bb62a3166eca23ac3

キャンセル
m.ts10806

2018/11/10 14:40

要は問題の切り分けです。実行したい処理が実行されていないから動いてないのか、実行されているが処理が間違っていて動かないか切りわけです。それができれば案外自己解決できたりします

要は問題の切り分けです。実行したい処理が実行されていないから動いてないのか、実行されているが処理が間違っていて動かないか切りわけです。それができれば案外自己解決できたりします

キャンセル
chamaki40

2018/11/10 20:43

ご返信遅くなり申し訳ございません。　chromeのconsoleで確認したら下記のような表示が出てました　Uncaught TypeError: Cannot read property 'addEventListener' of null at topButton (scroll.js:8) at scroll.js:30

ご返信遅くなり申し訳ございません。　chromeのconsoleで確認したら下記のような表示が出てました　Uncaught TypeError: Cannot read property 'addEventListener' of null at topButton (scroll.js:8) at scroll.js:30

キャンセル
m.ts10806

2018/11/10 20:50

要はtopButtonという変数が正しくできていない（getElementById()でとれてない）ようですが、このJavaScriptの記述、どこに書いてありますか？htmlも分割せずに全体のコードをご提示ください。

要はtopButtonという変数が正しくできていない（getElementById()でとれてない）ようですが、このJavaScriptの記述、どこに書いてありますか？htmlも分割せずに全体のコードをご提示ください。

キャンセル
m.ts10806

2018/11/10 20:51

scroll.jsというのはhtmlのどこにもないので。

scroll.jsというのはhtmlのどこにもないので。

キャンセル
chamaki40

2018/11/10 21:00

度々すいません。　今、編集にてindexの全体のページを追加しました　単純にhtml上でのscriptの記載が不足しているのでしょうか？

度々すいません。　今、編集にてindexの全体のページを追加しました　単純にhtml上でのscriptの記載が不足しているのでしょうか？

キャンセル
chamaki40

2018/11/10 21:00

https://q-az.net/return-top-button-without-jquery/　　このサイトだと普通に動いています

https://q-az.net/return-top-button-without-jquery/　　このサイトだと普通に動いています

キャンセル
m.ts10806

2018/11/10 21:05

回答しました。読み込み順の問題です。

回答しました。読み込み順の問題です。

キャンセル

回答 1 件

評価が高い順
新着順
古い順

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

score 1 · Accepted Answer · 2018-11-10T21:04

ベストアンサー

+1

※これはエラーの解消ができるだけで、実際の要件を満たすための1歩目です※

下記の記述を

<script src="js/scroll.js" type="text/javascript"></script>

</body> (bodyの閉じタグ)の前に持ってきてください。

<script src="js/scroll.js" type="text/javascript"></script>
</body>

なぜかというと、
JavaScriptは「ロード後」などの指定がない限り、上から読み込んでその読み込んだ時に動作します。
そのjs/scroll.jsの冒頭などで alert(1); などしてみるとわかるかもしれません。
その時点でhtmlは何も読み込まれていません。

読み込まれていないということはbodyの最後のほうにある#return-topは、
js/scroll.jsから参照しようとしても存在しない要素をgetElementしようとしている＝nullとなってaddEventもできない
ということです。
確実なのは</body>の前に持ってくること、または「ロード後」の記述を入れたうえで実行することです。

jQuery読まれているようなのでtopButton()を呼び出しているところを下記のようにしても良いかなと。

$(function(){
 topButton("return-top", 300);
});

投稿 2018/11/10 21:04

回答の評価を上げる

以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
回答の評価を下げる

下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

2018/11/10 21:11

指定して頂いた通りで動きました。　こんな小さな問題も丁寧に教えて頂きありがとうございます。　制作関係の仕事からしばらく離れていてたまにしかソースなど触っていなかったので原因がわからなかったです。

ありがとうございました。

指定して頂いた通りで動きました。　こんな小さな問題も丁寧に教えて頂きありがとうございます。　制作関係の仕事からしばらく離れていてたまにしかソースなど触っていなかったので原因がわからなかったです。ありがとうございました。

キャンセル
2018/11/10 21:28

解決できたようで何よりです。
JavaScriptを見ていく上ではやはりコンソールによるデバッグは必須かと思いますので、
まずエラー確認からしていくようにしてください

解決できたようで何よりです。 JavaScriptを見ていく上ではやはりコンソールによるデバッグは必須かと思いますので、まずエラー確認からしていくようにしてください

キャンセル

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

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

ページのトップに行くjavascriptが滑らかに動いてくれないのはなぜ？

関連した質問

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

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

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

ページのトップに行くjavascriptが滑らかに動いてくれないのはなぜ？

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

関連した質問

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

SNSアカウントでログイン

teratailアカウントでログイン