JavaScriptでトップページボタンにワンタップでスルスル〜とトップへ戻る機能をつけたい

webサイトにトップページボタンを作り、JavaScriptの機能をつけたいです。

発生している問題・エラーメッセージ

トップページボタンはすでにできていますが、JavaScriptの機能が反映されません。

該当のソースコード

html
1<!doctype html>
2<html>
3<head>
4<meta charset="UTF-8">
5<meta name="viewport" content="width=device-width,initial-scale=1">
6<title>Home|Risa_designer</title>
7<link href="https://fonts.googleapis.com/css?family=Bitter:400,700&display=swap" rel="stylesheet">
8<link rel="stylesheet" href="css/style.css">
9<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.4/css/all.css">
10<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.4/css/all.css">
11<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
12<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.4/css/all.css">
13<div id="page_top"><a href="#"></a></div>
14</head>
15<body id="portfolio">
16  
17 <!-- header始まり -->
18  <header>
19    <div class="logo">
20      <a href="index.html"><img src="images/logo.png" alt="RisaDesign"></a>
21    </div>
22    <nav>
23      <ul class="global-nav">
24        <li><a href="index.html">Home</a></li>
25        <li><a href="about.html">About</a></li>
26        <li><a href="contact.html">Contact</a></li>
27      </ul>
28    </nav>
29  </header>
30  <!-- header終わり -->
31  
32  <!-- wrap始まり -->
33  <div id="wrap" class="clearfix">
34    <div class="content">
35      <div class="main">
36        <h1>Home</h1>
37        <p>ご依頼についてと実績を掲載しています。</p>
38        <section>
39          <h2><a href="photograph.html"><img src="images/flower.jpg" alt="flower"></a></h2>
40          <p>Webデザインに関する説明となっており、ご依頼する際にご確認して頂きたい内容となっております。<br>「サービス内容」「制作料金」「ご契約の流れ」<a href="photograph.html">詳しくみる≫</a></p>
41        </section>
42        <section>
43          <h2><a href="video.html"><img src="images/pc.jpg" alt="pc"></a></h2>
44          <p>制作実績の紹介となっております。Webデザイン関連と紙デザインに分けて掲載しております。「Webデザイン関連」「名刺デザイン」<a href="video.html">詳しくみる≫</a></p>
45        </section>
46      </div>
47      <aside class="sidebar">
48        <section>
49          <h2>ご依頼について</h2>
50          <ul>
51            <li><a href="photograph.html#サービス内容">サービス内容</a></li>
52            <li><a href="photograph.html#制作料金">制作料金</a></li>
53            <li><a href="photograph.html#ご契約の流れ">ご契約の流れ</a></li>
54          </ul>
55        </section>
56        <section>
57          <h2>制作実績</h2>
58          <ul>
59            <li><a href="video.html#Webデザイン関連">Webデザイン関連</a></li>
60            <li><a href="video.html#名刺デザイン">名刺デザイン</a></li>
61          </ul>
62        </section>
63      </aside>
64    </div>
65  </div>
66  <!-- wrap終わり -->
67  
68  <!-- footer始まり -->
69  <!--pagetop-btn-->
70  <a href="#" class="btn-pageTop"><span class="fa fa-chevron-up"></span></a>
71  <!--/pagetop-btn-->
72  
73  <footer>
74    <small>&copy;2019 Risa_Design All rights reserved.</small>
75    <a href="https://www.instagram.com/rsymuc/" target="_blank" ><img src="images/insta2.png" class="insta2" alt="insta2"></a>
76  </footer>
77  <!-- footer終わり -->
78
79  <script src="https://code.jquery.com/jquery-3.1.1.js"></script>
80  <script src="http://cdn.jsdelivr.net/jquery.mixitup/latest/jquery.mixitup.min.js"></script>
81  <script src="../js/script.js"></script>
82</body>
83</html>

css
1@charset "UTF-8";
2
3body {
4  margin: 0;
5  padding: 0;
6  background-color: #cccccc;
7  color: #333333;
8  font-size: 15px;
9  line-height: 2;
10}
11
12p, h1, h2, h3, h4, h5, h6 {
13  margin-top: 0;
14}
15
16img {
17  vertical-align: bottom;
18}
19
20ul {
21  margin: 0;
22  padding: 0;
23}
24
25a {
26  color: #3583aa;
27  text-decoration: none;
28}
29
30a:visited {
31  color: #788d98;
32}
33
34a:hover {
35  text-decoration: underline;
36}
37
38header {
39  width: 960px;
40  height: 100px;
41  margin: 0 auto;
42}
43
44.logo {
45  float: left;
46  margin-top: 50px;
47}
48
49.global-nav {
50  float: right;
51  margin-top: 60px;
52}
53
54.global-nav li {
55  float: left;
56  margin: 0 20px;
57  font-size: 20px;
58  list-style: none;
59  font-family: 'Bitter', serif;
60}
61
62.global-nav li a {
63  color: #ffffff;
64}
65
66.global-nav li a:hover {
67  border-bottom: 2px solid #ffffff;
68  padding-bottom: 3PX;
69  text-decoration: none;
70}
71
72#wrap {
73  clear: both;
74  background-color: #ffffff;
75  margin-top: 220px;
76  padding: 35px 0;
77}
78
79.content {
80  width: 960px;
81  margin: 0 auto;
82}
83
84footer {
85  text-align: center;
86  color: #ffffff;
87  padding: 20px 0;
88  background-color:#e5b9c5;
89}
90
91footer small {
92  font-size: 12px;
93}
94
95.insta2 {
96  width: 25px;
97  height: 25px;
98  padding: 0 10px 0 10px;
99}
100
101
102
103#page_top{
104  width: 50px;
105  height: 50px;
106  position: fixed;
107  right: 0;
108  bottom: 50px;
109  background: #3f98ef;
110  opacity: 0.6;
111  border-radius: 50%;
112}
113#page_top a{
114  position: relative;
115  display: block;
116  width: 50px;
117  height: 50px;
118  text-decoration: none;
119}
120#page_top a::before{
121  font-family: 'Font Awesome 5 Free';
122  font-weight: 900;
123  content: '\f102';
124  font-size: 25px;
125  color: #fff;
126  position: absolute;
127  width: 25px;
128  height: 25px;
129  top: -5px;
130  bottom: 0;
131  right: 0;
132  left: 0;
133  margin: auto;
134  text-align: center;
135}
136
137#index footer {
138  width: 960px;
139  margin: 150px auto 0 auto;
140  text-align: left;
141  background-color: transparent;
142}
143
144#index {
145  background-image: url("../images/bg-index.jpg");
146  background-repeat: no-repeat;
147  background-position: center center;
148  background-attachment: fixed;
149  background-size: cover;
150}
151
152#about {
153  background-image: url("../images/header.jpg");
154  background-repeat: no-repeat;
155  background-position: center top;
156  background-attachment: fixed;
157  background-size: 100% auto;
158}
159
160#about .insta {
161  padding-left: 450px;
162}
163
164#contact .insta {
165  padding-left: 450px;
166}
167
168.main-center {
169  width: 940px;
170  margin: 0 auto;
171}
172
173h1 {
174  font-family: 'Bitter', serif;
175  font-size: 36px;
176  border-bottom: 1px solid #cccccc;
177}
178
179h2 {
180  font-family: 'Bitter', serif;
181  font-size: 24px;
182}
183
184.icon:before {
185  content: "";
186  padding-right: 10px;
187  border-left: 7px solid #c57d86;
188}
189
190#about .profile-txt {
191  width: 540px;
192  float: left;
193}
194
195#about .profile-txt span {
196  font-weight: bold;
197}
198
199#about .profile-image {
200  float: right;
201}
202
203.clearfix:after {
204  content: "";
205  display: block;
206  clear: both;
207}
208
209section {
210  margin-bottom: 35px;
211}
212
213
214
215#index #wrap {
216  background-color: transparent;
217  margin-top: 0;
218  padding: 0;
219}
220
221#portfolio {
222  background-image: url("../images/header.jpg");
223  background-repeat: no-repeat;
224  background-position: center top;
225  background-attachment: fixed;
226  background-size: 100% auto;
227}
228
229.main {
230  width: 700px;
231  margin: 0 10px;
232  float: left;
233}
234
235.sidebar {
236  width: 200px;
237  margin: 0 10px 0 30px;
238  float: right;
239  font-family: 'Bitter', serif;
240}
241
242a img:hover {
243  opacity: 0.8;
244}
245
246.sidebar h2 {
247  margin-bottom: 10px;
248}
249
250.sidebar ul {
251  font-size: 16px;
252  margin-left: 20px;
253}
254
255.sidebar ul a {
256  color: #333333;
257}
258
259#photograph {
260  background-image: url("../images/header.jpg");
261  background-repeat: no-repeat;
262  background-position: center top;
263  background-attachment: fixed;
264  background-size: 100% auto;
265}
266
267#video .photograph-list li {
268  float: left;
269  list-style: none;
270  margin: 0 20px 15px 0;
271}
272
273#video .photograph-list li:nth-child(3n){
274  margin-right: 0;
275}
276
277#video {
278  background-image: url("../images/header.jpg");
279  background-repeat: no-repeat;
280  background-position: center top;
281  background-attachment: fixed;
282  background-size: 100% auto;
283}
284
285#photograph .career th {
286  width: 400px;
287  background-color: #f0f0f0;
288  padding: 12px 0;
289  border: 1px solid #cccccc;
290  
291}
292
293#photograph .career td {
294  width: 400px;
295  padding: 12px 0;
296  border: 1px solid #cccccc;
297  text-align: center;
298}
299
300table {
301  border-spacing: 0;
302  border-collapse: collapse;
303}
304
305#contact {
306  background-image: url("../images/header.jpg");
307  background-repeat: no-repeat;
308  background-position: center top;
309  background-attachment: fixed;
310  background-size: 100% auto;
311}
312
313#contact .access table {
314  float: left;
315}
316
317#contact .access th,
318#contact .access td {
319  text-align: left;
320  vertical-align: top;
321  line-height: 2.5;
322}
323
324#contact .access td {
325  padding-left: 30px;
326}
327
328#contact .access iframe {
329  width: 460px;
330  float: right;
331}
332
333#contact .form {
334  background-color: #eaeaea;
335  padding: 30px 50px;
336}
337
338#contact .form dl dt {
339  width:165px;
340  padding: 10px 0;
341  float: left;
342  clear: both;
343}
344
345#contact .form dl dd {
346  padding: 10px 0;
347}
348
349#contact .form .name {
350  width: 240px;
351  height: 30px;
352}
353
354#contact .form .email {
355  width: 300px;
356  height: 30px;
357}
358
359#contact .form .tel {
360  width: 240px;
361  height: 30px;
362}
363
364#contact .form .type {
365  width: 180px;
366  height: 30px;
367}
368
369#contact .form .message {
370  width: 660px;
371  height: 150px;
372}
373
374#contact .form button {
375  background-color: #948F8F;
376  color: #ffffff;
377  font-size: 20px;
378  width: 120px;
379  display: block;
380  text-align: center;
381  line-height: 50px;
382  border-radius: 5px;
383  border: 3px solid #948F8F;
384  margin-left: 165px;
385}
386
387#contact .form button:hover {
388  background-color: #ffffff;
389  color: #948F8F;
390  cursor: pointer;
391}
392
393#contact .form .required:after {
394  content: " * ";
395  color: #ff0000;
396}
397
398#contact .form .attention {
399  margin: 20px 0 0 165px;
400}

JavaScript
1/*-------------------------
2ページトップボタン
3--------------------------*/
4$(".btn-pageTop").on("touchstart",function(){
5  $(this).toggleClass("active");
6  $(".header-nav").fadeToggle(500);
7});
8

試したこと

スクールで習った公式は下記です。
これを自分で作ったhtmlに当てはめてコードをかきましたができませんでした。
この公式を必ず使いたいのですが可能でしょうか。
ご教授宜しくお願い致します。

$(".btn-trigger").on("touchstart",function(){

$(this).toggleClass("active");
$(".header-nav").fadeToggle(500);
});

m.ts10806

2019/08/05 00:08

>トップページボタンを作りたいです。トップページボタンは既にできています。もう少し正確に「やりたいこと」「実現したいこと」「今できていないこと」を記載されたほうが良いと思います。（今回くらいの内容でしたら何となくエスパーできなくもないですが、何となくでもエスパーをさせることなく誰にでも伝わる表現を心がけたほうが良いです）

risacuspin

2019/08/05 05:58

コメントありがとうございます。自分が分からないことを言葉にするのが難しく、これで他の人にも伝わると思ってしまいました。ご指摘されて他の人には伝わらないと気づきましたすみませんでした。文章を見直して修正します。

m.ts10806

2019/08/05 06:01

見る人ほぼ100％が赤の他人なので、そのために質問テンプレートのような最低限必要な項目を入力するための機能があります。 https://teratail.com/help/question-tips#questionTips3-8

risacuspin

2019/08/05 06:42

送っていただきありがとうございます。テンプレートを使用し、修正いたしました。

行動規範の内容に同意します

回答2件

機能しているかどうかは下記のようにして調べましょう。

js
1$(".btn-pageTop").on("touchstart",function(){
2    console.log("click!!");
3  $(this).toggleClass("active");
4  $(".header-nav").fadeToggle(500);
5});    
6

ブラウザ開発ツールのコンソールを確認して「click!!」と出力されていれば.btn-pageTopのtouchstartイベントは動いていると言えます。

動かないということは何かしら邪魔があるのかもしれません。
もう少しコードを削って必要最小限のコードで試してみたほうが良いかもしれません

動いているなら「必要な処理が足りていない」ということになります。
つまりスルスル〜とトップへ戻る機能が未実装であるということになります。
自身が提示したJavaScriptの機能を良く見てみると分かると思います。
下記2つに「スルスル～とトップへ戻る機能」があるだろうか？
toggleClass()
fadeToggle()

こういった機能はありふれているものですので、ネット上で検索しても良いですし、
teratail内の過去質問を有効活用することも覚えると、自己解決で済むことも多くなると思います。

そうするとより具体的なキーワードが出てくることもあります。
「スルスル～とトップへ戻る」を言い換えるとどうなるか？
もう少しプログラムっぽい表現はないか？
と考えるのも必要ですし、そのキーワードを探すための検索というのもしていってください。

他、気になったところを列挙

なぜ3回も読み込ませている？？https://use.fontawesome.com/releases/v5.6.4/css/all.css
自身が作成したCSSは↑のようなフレームワークなどよりも後に読み込ませたほうが良い（読み込み順は一番最後が好ましい）
別のバージョンのjQueryが読み込まれているがバッティングするのではないか。
今の画面にmixitupは必要？
<head></head>の中に要素を置くのは構文上NG

投稿2019/08/05 07:00

m.ts10806

総合スコア80850

animateがコードに含まれていないです。

teratailで質問する前に「jquery トップ戻る」などで
検索して調べてください。

投稿2019/08/04 23:20

yasutomi

総合スコア2937

risacuspin

2019/08/05 06:45

質問する前にJavaScriptで検索しましたが分かりませんでしたので質問しました。

querykuma

2019/08/05 10:17 編集

「jquery トップ戻る」で検索してわかりましたので問題は別のところにあると思います。解決策はもう一度スクールに行って対面形式で教わることです。ここではどのように説明を受けても「わからない」として不毛な説明を要求することになるでしょう。「jquery トップ戻る」で検索すると【jQuery】「トップへ戻る」ボタン付き！するすると動くアンカーリンク https://qiita.com/kape/items/ecd6f12b8ff547453ed8 が見つかりました。 $("html, body").animate({ scrollTop: 0 }, 500, "swing"); そこにある上記プログラムをブラウザ開発ツールのコンソールに貼り付けるとページのトップ（位置0）にスルスル〜と移動しました。「スルスル〜と移動」にしてもエスパーして回答しています（失礼ですが質問が不明確だと思います）が違っていたら忘れてください。

行動規範の内容に同意します

あなたの回答