こんにちは。プログラミング初心者です。
bootstrap4でスムーズスクロールを使いたいのですが、やり方を知っている方いらっしゃいますでしょうか。
https://kishiken.com/jq/bootstrap-scrollsp-smooth-scroll/
https://codepen.io/mikakurimoto/pen/KrQjVb
http://proclass.jp/blog/?p=4307
http://kishiken.com/common/bootstrap_sample/smooth-scroll/#AreaC
こちらの４つのサイトを全て試しましたがダメでした。
jQueryがうまく読み込めてないのかと思い、CDNとダウンロードするやり方両方やりましたが、結果は変わらずでした。
やり方がわかる方、いらっしゃいましたらご教授お願いいたします！
※追記
ソースコードを書き忘れてました。申し訳ございません。
ページ内リンクをidで指定しているので、クリックした時に指定の箇所に移動はできるのですが、スムーズな動きができないという状況です。
###index.html
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<!-- Bootstrap CSS -->
9<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
10<link rel="stylesheet" href="css/styles.css">
11<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
12<title>Welcome to My Portforio Site!</title>
13<script type="text/javascript" src="jquery-3.5.0.min.js"></script>
14</head>
15<body>
16<div>
17<nav class="navbar navbar-expand-lg navbar-light bg-light" role="navigation">
18<a class="navbar-brand" href="#">MyPortforio</a>
19<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
20<span class="navbar-toggler-icon"></span>
21</button>
22
23<div class="collapse navbar-collapse" id="navbarSupportedContent">
24<ul class="navbar-nav mr-auto">
25<li class="nav-item">
26<a class="nav-link" href="#" data-scroll>Top</a>
27</li>
28<li class="nav-item">
29<a class="nav-link" href="#profile" data-scroll>Profile</a>
30</li>
31<li class="nav-item">
32<a class="nav-link" href="#skills" data-scroll>Skills</a>
33</li>
34<li class="nav-item">
35<a class="nav-link" href="#outputs" data-scroll>Outputs</a>
36</li>
37<li class="nav-item">
38<a class="nav-link" href="#experiences" data-scroll>Experiences</a>
39</li>
40</ul>
41</div>
42</nav>
43</div>
44<div class="jumbotron jumbotron-fluid" id="top">
45<h4 class="display-4 text-white animation">Welcome to my Portforio Site!</h4>
46<hr class="my-4">
47<p class="text-white lead">Created by "Taisei Kuwahara".</p>
48<h4 class="text-white" id="share">Please share this Portforio.</h4>
49</div>
50
51<div class="container main" id="profile">
52<h2><span class="border-bottom border-info">Profile</span></h2>
53<table class="table table-borderless" id="aboutme">
54<tr>
55<td>名前</td>
56<td>！！！！（？？？？）</td>
57</tr>
58<tr>
59<td>学歴</td>
60<td>某私立大学在学中</td>
61</tr>
62<tr>
63<td>性格</td>
64<td></td>
65</tr>
66<tr>
67<td>趣味</td>
68<td></td>
69</tr>
70<tr>
71<td>特技</td>
72<td></td>
73</tr>
74</table>
75<table class="table table-borderless" id="snsaccount">
76<tr>
77<td>Twitter</td>
78<td>@mjIZ57</td>
79</tr>
80<tr>
81<td>Facebook</td>
82<td></td>
83</tr>
84<tr>
85<td>Github</td>
86<td></td>
87</tr>
88<tr>
89<td>Blog</td>
90<td></td>
91</tr>
92</table>
93</div>
94
95
96<div class="container content">
97<h2><span class="border-bottom border-info title" id="skills">Skills</span></h2>
98<div class="card-deck">
99<div class="card">
100<img class="card-img-top" src="/Users/kuwabaraoohare/myportforio/img/rectangle_large_type_2_634834daa2f2542d2541b2f790dcd387.jpg" alt="html/css">
101<div class="card-body">
102<h5 class="card-title">HTML/CSS</h5>
103<p class="card-text">私が初めて勉強した言語です。去年の12月から勉強を始めどの製作物にも使っている、一番使いこなしている言語です。</p>
104</div>
105</div>
106<div class="card">
107<img class="card-img-top" src="/Users/kuwabaraoohare/myportforio/img/d37229-4-164091-0.jpg" alt="javascript">
108<div class="card-body">
109<h5 class="card-title">Javascript(jQuery)</h5>
110<p class="card-text">動的なWebサイトを作ってみたいと思い、HTML/CSSの勉強と同時に勉強しました。javascriptで簡単なクイズゲームを作成しました。</p>
111</div>
112</div>
113<div class="card">
114<img class="card-img-top" src="/Users/kuwabaraoohare/myportforio/img/MIYAKO85_amanogawatentai20140725_TP_V.jpg" alt="bootstrap4">
115<div class="card-body">
116<h5 class="card-title">Bootstrap4</h5>
117<p class="card-text">このポートフォリオサイトにも使用したフレームワークです。最近はできるだけbootstrapに頼らないweb制作を心がけています。</p>
118</div>
119</div>
120</div>
121<div class="card-deck">
122<div class="card">
123<img class="card-img-top" src="/Users/kuwabaraoohare/myportforio/img/Linux_command-line._Bash._GNOME_Terminal._screenshot.png" alt="command line">
124<div class="card-body">
125<h5 class="card-title">Command Line</h5>
126<p class="card-text">僕がエンジニアを目指そうと思ったきっかけとなった言語です。高校生の時にLinuxを通じて勉強して、今でもその知識を使っています。</p>
127</div>
128</div>
129<div class="card">
130<img class="card-img-top" src="/Users/kuwabaraoohare/myportforio/img/1200px-PHP-logo.svg.png" alt="php">
131<div class="card-body">
132<h5 class="card-title">PHP</h5>
133<p class="card-text">Webサイトにログイン機能を付けてみたいと思い、勉強しています。現在一番力を入れて勉強している言語です。</p>
134</div>
135</div>
136</div>
137</div>
138
139<div class="container content">
140<h2><span class="border-bottom border-info title" id="outputs">Outputs</span></h2>
141<div class="card-deck">
142<div class="card content" style="width: 18rem;">
143<div class="card-body">
144<h5 class="card-title">ポートフォリオサイト</h5>
145<p class="card-text">私のポートフォリオ（このサイト）です。初めての自作のWebサイトです。</p>
146<p class="card-text">HTML,CSS,Bootstrap4</p>
147</div>
148</div>
149<div class="card content" style="width: 18rem;">
150<div class="card-body">
151<h5 class="card-title">クイズゲーム</h5>
152<p class="card-text">javascriptで作った、簡単な自分に関するクイズゲームを作りました。</p>
153<p class="card-text">HTML,CSS,Javascript</p>
154</div>
155</div>
156<div class="card content" style="width: 18rem;">
157<div class="card-body">
158<h5 class="card-title">画像投稿サイト</h5>
159<p class="card-text">Twitterのような画像を投稿できるサイトを作りました。今度はこのサイトにログイン機能を搭載しようと考えています。</p>
160<p class="card-text">HTML,CSS,php</p>
161</div>
162</div>
163</div>
164</div>
165
166<div class="container content">
167<h2><span class="border-bottom border-info title" id="experiences">Experiences</span></h2>
168<div class="card-deck">
169<div class="card content" style="width: 18rem;">
170<div class="card-body">
171<h5 class="card-title">サークル活動</h5>
172<p class="card-text">私は大学の競技ダンスサークルに所属しています。競技ダンスの大会で勝つために、パートナーとの週4回の練習を通して技術だけではなく、コミュニケーション能力、協調性の向上も図っています。</p>
173</div>
174</div>
175<div class="card content" style="width: 18rem;">
176<div class="card-body">
177<h5 class="card-title">アルバイト</h5>
178<p class="card-text">塾のアルバイトを一年間、パン屋で半年間バイトをしていました。</p>
179</div>
180</div>
181</div>
182</div>
183<!-- Optional JavaScript -->
184<!-- jQuery first, then Popper.js, then Bootstrap JS -->
185<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
186<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
187<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
188<script src="js/main.js"></script>
189</body>
190</html>
##main.js
javascript
1$(function(){
2$('a[href^=#]' + 'a:not(".nav-link")').click(function() {
3 var speed = 400;
4 var href= $(this).attr("href");
5 var target = $(href == "#" || href == "" ? 'html' : href);
6 var position = target.offset().top;
7 $('body,html').animate({scrollTop:position}, speed, 'swing');
8 return false;
9 });
10});
Q&A
