前提・実現したいこと
javascriptを外部ファイルから読み込ませたい。
発生している問題・エラーメッセージ
htmlにベタがきするとスクロールが機能するが、外部シートに記入するとエラーで機能しない。 外部シートに文字色を変えてみたり、簡単な記述は機能します。)
該当のソースコード
下記のようにhtmlにベタがきの場合はうまく機能しております。
<!doctype html> <html lang="ja"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="style.css"> <title>Justmeet</title> </head> <body> <div class="header"> <ul><!-- --><a href="#1" class="link-about"><li>About</li></a><!-- --><a href="#2" class="link-works"><li>Works</li></a><!-- --><a href="#3" class="link-contact"><li>Contact</li></a> </ul> </div><!-- /header --> <div id="1" class="about"> <h1>About</h1> </div> <div id="2" class="works"> <h1>Works</h1> </div> <div id="3" class="contact"> <h1>Contact</h1> </div> <!-- jQueryの読み込み --> <script type="text/javascript" src="http://code.jquery.com/jquery-3.1.0.min.js"></script> <!-- #リンクのスムーズスクロール --> <script> $(function(){ // #で始まるリンクをクリックしたら実行されます $('a[href^="#"]').click(function() { // スクロールの速度 var speed = 400; // ミリ秒で記述 var href= $(this).attr("href"); var target = $(href == "#" || href == "" ? 'html' : href); var position = target.offset().top; $('body,html').animate({scrollTop:position}, speed, 'swing'); return false; }); }); </script> </body> </html>
エラーのソースコード
こちらのように外部ファイルに書くとスクロールが機能しません。
<!doctype html> <html lang="ja"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="style.css"> <title>Justmeet</title> </head> <body> <div class="header"> <ul><!-- --><a href="#1" class="link-about"><li>About</li></a><!-- --><a href="#2" class="link-works"><li>Works</li></a><!-- --><a href="#3" class="link-contact"><li>Contact</li></a> </ul> </div><!-- /header --> <div id="1" class="about"> <h1>About</h1> </div> <div id="2" class="works"> <h1>Works</h1> </div> <div id="3" class="contact"> <h1>Contact</h1> </div> <p id="target">ここの色が変わります</p> <input type="button" value=" ボタン " onclick="changeColor('target');" /> <!-- jQueryの読み込み --> <script src="script.js"></script> </body> </html> script.js の記述 スクロール こちらが機能しません。 $(function(){ // #で始まるリンクをクリックしたら実行されます $('a[href^="#"]').click(function() { // スクロールの速度 var speed = 400; // ミリ秒で記述 var href= $(this).attr("href"); var target = $(href == "#" || href == "" ? 'html' : href); var position = target.offset().top; $('body,html').animate({scrollTop:position}, speed, 'swing'); return false; }); }); 文字色を変える こちらは機能します function changeColor(idname){ var obj = document.getElementById(idname); obj.style.color = '#ffffff'; //文字色を白にする obj.style.backgroundColor = '#ff0000'; //背景色を赤にする }
試したこと
<script src="script.js"></script>の位置をheadの中に入れてみましたがダメでした。色を変えたり簡単な指示は機能するのに、何が原因なのでしょうか。
補足情報(FW/ツールのバージョンなど)
ここにより詳細な情報を記載してください。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/07/21 12:17
2019/07/21 12:41