Q&A
topButton ()が実行されていることはデバッグ確認されたのでしょうか？
下記のようにページのフッターに矢印でトップまで戻る(アンカーポイント)スクリプトを設定しました。
参考サイトでは滑らかに動いていましたが、自分のサイトに設置したらトップボタンを押すといきなりトップに戻り、滑らかに上に進みません。 なぜでしょうか？
ヘッダー部分に下記のスクリプトをリンクさせており、制御されてしまっているのか分かりませんが
スムーズに動かす方法教えてください 非常に初級の問題かと思いますが
<!-- 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年以降、副業が「本業」を超える時代になる </h1> <div class="text"> よくセミリタイア、不労所得で余生を満喫するなどといいますが、近年、この「セミリタイア」 という言葉が、若年層にも浸透しつつあります。 それはなぜでしょうか？<br> 仕事以外にも収入を得る手段が増えたからです。 <br> テレビやネットなど見ると、「AI」「VR」「IPO」「BTC」などとアルファベットのキーワードを目にしますが、これらは現代の市場を反映しています。通信、商業、物流関係の仕事などは年々オートメーション化して、人とのコンタクト、在庫管理、商品を出荷する仕組み、そして金融市場においては「仮想通貨」という新しいネット上の通貨が生まれて、人々は資金作りに有益な情報を得ることができる時代となりました。 <br>そしてその情報を得る手段の一つとしてソーシャルネットワークも進化してきています。 個人のユーザーが少額の資金でも始められる投資商品があるとか、トレンドを載せてどの銘柄を購入したらいいか解説している実践的な方もいたりします。</div> <h1>身の丈に合う稼ぎ方 </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>メディアにまどわされないために </h1> <div class="text"> 2017年末から今年の初めにかけて、仮想通貨の相場が1ビットコインで100万円となり、その時期に売買をして儲けた方を 「億り人」という流行語が一時ありました。 その煽りに便乗して「ビットコインで一発当てよう」「所持金を全て投資しよう」と 始めた方も少なくはないはずです。 しかし、これは非常に安易な行動です。何も知識がないうちにただ人が儲けていることを 知って、自分でも同じように儲けることができると思ったら非常に打算的な考えです。 <br> なぜなら、仮想通貨に限らず株や為替などで利益を出している人は少なからず書籍や情報を吸収して知識を得ている方か、指南する 投資のエキスパートがいるものです。 どんなことを始めるにも同じことが言えますが、最初から「成功者」の過程を知らずに結果だけを 求めるだけでは物事はうまくいきません。 </div> <h1>AI時代、需要がある職業はコレだ </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>
それはどういう意味ですか？ 現状スクリプトがあってもなくても上に進むだけの状態です
topButton ()というメソッドが実行されていることは確認しましたか？という確認です。console.log()を利用してブラウザデベロッパーツールのコンソールに出力して、想定の処理をきちんと通っているか確認してください。きちんと処理を通ってないと想定の動きにはなりませんよね？
要は問題の切り分けです。実行したい処理が実行されていないから動いてないのか、実行されているが処理が間違っていて動かないか 切りわけです。それができれば案外自己解決できたりします
ご返信遅くなり申し訳ございません。 chromeのconsoleで確認したら下記のような表示が出てました Uncaught TypeError: Cannot read property 'addEventListener' of null at topButton (scroll.js:8) at scroll.js:30
要はtopButtonという変数が正しくできていない（getElementById()でとれてない）ようですが、このJavaScriptの記述、どこに書いてありますか？htmlも分割せずに全体のコードをご提示ください。
scroll.jsというのはhtmlのどこにもないので。
度々すいません。 今、編集にてindexの全体のページを追加しました 単純にhtml上でのscriptの記載が不足しているのでしょうか？
https://q-az.net/return-top-button-without-jquery/ このサイトだと普通に動いています
回答しました。読み込み順の問題です。
回答1件
0
ベストアンサー
※これはエラーの解消ができるだけで、実際の要件を満たすための1歩目です※
下記の記述を
</body> (bodyの閉じタグ)の前に持ってきてください。html
1<script src="js/scroll.js" type="text/javascript"></script>
html
1<script src="js/scroll.js" type="text/javascript"></script> 2</body>
なぜかというと、
JavaScriptは「ロード後」などの指定がない限り、上から読み込んでその読み込んだ時に動作します。
そのjs/scroll.jsの冒頭などで alert(1); などしてみるとわかるかもしれません。
その時点でhtmlは何も読み込まれていません。
読み込まれていないということはbodyの最後のほうにある#return-topは、
js/scroll.jsから参照しようとしても存在しない要素をgetElementしようとしている＝nullとなってaddEventもできない
ということです。
確実なのは</body>の前に持ってくること、または「ロード後」の記述を入れたうえで実行することです。
jQuery読まれているようなのでtopButton()を呼び出しているところを下記のようにしても良いかなと。
js
1 2$(function(){ 3 topButton("return-top", 300); 4}); 5
投稿2018/11/10 12:04
総合スコア80888
あなたの回答
tips
プレビュー
