Q&A
コードはマークダウンのcode機能を利用してご提示ください。
また提示内容だけではJavaScriptのコードがどこに挿入されているのかわかりませんので、わかるようにご提示ください（できればHTMLは全体提示されたほうが良いです）
前提・実現したいこと
jQueryのanimateメソッドを使用して、ページ内リンクを作成したいと考えています。
ナビバーの「MｙPortfolio」をクリックした時に、animateメッソドを利用してページの最上部へ戻れるようにしたいです。
発生している問題・エラーメッセージ
500ミリ秒かけてページ最上部へ移動してほしいのですが、実際は一瞬でページ最上部へ移動してしまいます。
該当のソースコード
jQuery
1// ページ内リンク 2$(function(){ 3$('#page-top').click(function(){ 4 $('html, body').animate({ 5 'scrollTop':0 6 7 8 },500); 9 }); 10});
html
1<!doctype html> 2<html lang="ja"> 3 <head> 4 <!-- Required meta tags --> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 7 8 <link rel="stylesheet" href="style3.css"> 9 10 <!-- Bootstrap CSS --> 11 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> 12 13 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> 14 <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet"> 15 16 <title>My Portfolio</title> 17 </head> 18 <body data-spy="scroll" data-target="#navbarResponsive"> 19 20 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> 21 22 23 <!-- Navigation --> 24 <nav class="navbar navbar-expand-md navbar-light bg-light fixed-top"> 25 <div class="container"> 26 <a href="" class="navbar-brand" id="page-top">My Portfolio</a> 27 <button class="navbar-toggler " type="button" data-toggle="collapse" data-target="#maki" > 28 <span class="navbar-toggler-icon"></span> 29 </button> 30 31 <div class="collapse navbar-collapse" id="maki"> 32 <ul class="navbar-nav ml-auto my-2"> 33 <li class="nav-item active"> 34 <a href="" class="nav-link" id="">Home</a> 35 </li> 36 <li class="nav-item"> 37 <a href="" class="nav-link">About</a> 38 </li> 39 <li class="nav-item"> 40 <a href="" class="nav-link">Works</a> 41 </li> 42 <li class="nav-item"> 43 <a href="" class="nav-link">Services</a> 44 </li> 45 <li class="nav-item"> 46 <a href="" class="nav-link">Contact</a> 47 </li> 48 </ul> 49 50 </div> 51 </div> 52 </nav> 53 54 <!--- Image Slider --> 55 <div id="slides" class="carousel slide" data-ride="carousel"> 56 <ul class="carousel-indicators"> 57 <li data-target="#slides" data-slide-to="0" class="active"></li> 58 <li data-target="#slides" data-slide-to="1"></li> 59 <li data-target="#slides" data-slide-to="2"></li> 60 </ul> 61 62 <div class="carousel-inner"> 63 <div class="carousel-item active"> 64 <img src="img/bridge-918677_960_720.png"> 65 66 <div class="carousel-caption"> 67 <h2 class="display-4">HELLO WORLD!!</h2> 68 <h3 class="display-4">I'm Freerance</h3> 69 </div> 70 </div> 71 72 73 <div class="carousel-item"> 74 <img src="img/bridge-918677_960_720.png"> 75 <div class="carousel-caption"> 76 <h2 class="display-4">HELLO WORLD!!</h2> 77 <h3 class="display-4" >I'm Freerance</h3> 78 </div> 79 </div> 80 <div class="carousel-item"> 81 <img src="img/bridge-918677_960_720.png"> 82 <div class="carousel-caption"> 83 <h2 class="display-4">HELLO WORLD!!</h2> 84 <h3 class="display-4">I'm Freerance</h3> 85 </div> 86 </div> 87 88 </div> 89 </div> 90 91 <!-- About me --> 92 <div class="container my-4"> 93 <div class="row padding"> 94 <div class="col-md-6"> 95 96 <div class="adrece"> 97 <h5 class="phone">Call <span class="number">09068501697</span> </h5> 98 99</div> 100 <h5 class="email">Email <span class="gmail">naomichi.nakadai@gmail.com</span></h5> 101 102 103</div> 104 105<div class="col-md-6"> 106<img src="img/img_kawase.png" alt=""> 107</div> 108</div> 109 </div> 110 111 <!-- Works --> 112 <div class="jumbotron"> 113 <div class="container ext-center"> 114 <h2 class="font-weight-normal text-center " id="" >Works</h2> 115 <p class="text-center">what I do</p> 116 <div class="change-btn back-btn">←前へ</div> 117 <div class="change-btn next-btn">次へ→</div> 118 119 120 <ul class="text-center"> 121 <li class="php show"><img src="img/dentaku1.jpg" alt=""><p>用いて電卓を作成しました。</p></li> 122 <li class="php"><img src="img/Twitter-Web-Light2.png" alt=""><p>PHPを用いて掲示板を作成しました。</p></li> 123 <li class="php"><img src="img/01.jpg" alt=""><p>ショッピングサイトを作成しました</p></li> 124 </ul> 125 126 127 128 </div> 129 </div> 130 131 132 133 <!-- service --> 134 <div class="container" id=""> 135 <div class="row justify-content-center"> 136 <div class="col-md-12"> 137 <div class="text-center"> 138 <h2>Services</h2> 139 <p>whta I can</p> 140 </div> 141 </div> 142 </div> 143 <div class="container"> 144 <div class="row mt-5 text-center flex-nowrap"> 145 <div class="col-md-4 service"> 146 <div class="icon"> 147 <i class="far fa-edit"></i> 148 </div> 149 <div class=""> 150 <h5>ランディングページ(LP)作成</h5> 151 <p>商品の販売促進に適した、縦長1ページのLPを作成できます。レスポンシブ対応。（テンプレートを使用する場合もあります）</p> 152 </div> 153 154 </div> 155 <div class="col-md-4 service"> 156 <div class="icon"> 157 <i class="fas fa-desktop"></i> 158 </div> 159 <div class=""> 160 <h5>ブログ型ホームページの作成</h5> 161 <p>WordPressテーマを利用して、ホームページを作成できます。もちろんインターネットにいつでも公開できる状態で納品致します。</p> 162 </div> 163 164 </div> 165 <div class="col-md-4 service"> 166 <div class="icon"> 167 <i class="fas fa-paint-brush"></i> 168 </div> 169 <div class=""> 170 <h5>記事執筆</h5> 171 <p>読者に分かりやすい文章を執筆できます。 172 思わず手にとりたくなるコピーライティングも考察して、あなたの商品を紹介致します。</p> 173 </div> 174 175 </div> 176 177 </div> 178 <div class="row text-center flex-nowrap"> 179 <div class="col-md-4 service "> 180 <div class="icon"> 181 <i class="fas fa-camera"></i> 182 </div> 183 <div class=""> 184 <h5>動画編集</h5> 185 <p>YouTubeアップロードを視野に入れた動画編集が可能です。テロップ・効果音・BGM挿入もお任せください.</p> 186 <p></p> 187 </div> 188 189 </div> 190 <div class="col-md-4 service"> 191 <div class="icon"> 192 <i class="fas fa-user-alt"></i> 193 </div> 194 <div class=""> 195 <h5>サポート</h5> 196 <p>納品後の修正は10回まで無料です。テキストが必要になった際の文章作成もサポート致します。</p> 197 <p></p> 198 </div> 199 200 </div> 201 <div class="col-md-4 service"> 202 <div class="icon"> 203 <i class="fas fa-print"></i> 204 </div> 205 <div class=""> 206 <h5>SEO 対策</h5> 207 <p>WordPressでのホームページ作成、記事執筆はもちろんSEO対策をします。検索上位を狙い、集客率をアップさせましょう。</p> 208 </div> 209 210 </div> 211 </div> 212 </div> 213 214 </div> 215 216 <!-- figure --> 217 <figure> 218 <div class="fixed-wrap"> 219 <div class="fixed"> 220 221 </div> 222 </div> 223 </figure> 224 225 226 227 <!-- Contact --> 228 <div class="container contact my-5"> 229 <h2 class="text-center">Contact</h2> 230 <form action="" method="post"> 231 <div class="item"> 232 <label for="rendou">メールアドレス:</label> 233 <input id="rendou" type="email" name="email" class="w-25"> 234 </div> 235 236 <div class="item"> 237 <label for="quiz">お問い合わせ内容:</label> 238 <textarea name="" id="quiz" placeholder="お問い合わせ内容を記入してください" class="w-25" ></textarea> 239 </div> 240 241 <div class="item"> 242 <input type="submit" value="送信"> 243 244 </div> 245 </form> 246 </div> 247 248 249 <!--練習 --> 250<div class="top"> 251 <div class="second"> 252 253 </div> 254 255</div> 256 257 258 259 260 261 262 263 264<!-- footer --> 265 <footer class="text-center text-white bg-dark"> 266 <div class="container"> 267 <p>最後までご覧いただきありがとうございます。</p> 268 <i class="fab fa-facebook-square"></i> 269 <i class="fab fa-twitter-square"></i> 270 <i class="fab fa-instagram"></i> 271 <hr> 272 ©My Portfolio 273 </div> 274 275 276 277 </footer> 278 279 <!-- Optional JavaScript --> 280 <!-- jQuery first, then Popper.js, then Bootstrap JS --> 281 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> 282 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> 283 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> 284 285 <script src="script2.js"></script> 286 </body> 287</html>
回答1件
0
ベストアンサー
#page-topにはhrefが設定されていて「自身」に画面遷移が起こっているのと同義
要件次第ですがhref属性自体抜いても良いのでは。
- jQuery本体が2種類読み込まれていてバッティングしている。あと下部に書かれているslimのほうが有効になっているようだがslimにはanimate()などは含まれていない
slimはきちんと構成や用途を理解して使う必要があるので、特にそういうのがなければslimでないほうがトラブルがない
個人的には「ページトップ」の機能はページ左下にボタンがあるものという認識があるので、
ヘッダーのタイトルロゴを押下してページトップに行くのは違和感がありますけども。
投稿2019/10/24 14:13
編集2019/10/24 14:22総合スコア80875
ご回答ありがとうございます。h属性を外し、下部のスクリプトを削除したところうまくいきました。下部のスクリプトはBootstrapのリファレンスのStarter templateから抜き取ってきたもので、私自身スクリプトの意味を理解しているわけではありませんでした。
丁寧な回答をいただけて、とても助かりました。
解決されたようで何よりです。
必要か不必要かの精査はあまり簡単ではありませんが、JavaScriptは結構衝突の多い言語と私は認識していますので、jQueryを利用する際は同機能で何かバッティングがないかは気にするようにしてみてください。
あなたの回答
tips
プレビュー
