JavaScript　ページのトップへ戻るボタンの実装について

前提

Webサイトの「トップページへ戻る」ボタンが効かなくて困っています。
どうやらJavaScriptのコードが誤っているようなのですが、どこが誤りなのかもしわかる方がいらっしゃいましたら、教えていただけますでしょうか？
当方HTML及びCSSは学びましたが、Javascriptに関しては初心者です。
もし足りない情報があれば追記させていただきますのでよろしくお願い致します。

実現したいこと

「トップページへ戻る」ボタンを動作するようにする

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

ボタンは表示されるが、トップへ戻らない

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head prefix="og: https://ogp.me/ns#">
4<meta charset="UTF-8">
5<meta name="viewport" content="width=device-width, initial-scale=1.0">
6<meta name="format-detection" content="telephone=no,email=no,address=no">
7<meta name="description" content="説明文">
8<meta property="og:site_name" content="説明文">
9<link href="./font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet">
10<script src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js"></script>
11<link rel="stylesheet" href="./css/style-smist.css">
12<link rel="stylesheet" href="./css/lightbox/lightbox.min.css">
13<script src="./js/jquery.js"></script>
14<script src="./js/func.js"></script>
15<script src="./js/smist2.js" type="text/javascript"></script>
16<script src="./js/lightbox/lightbox.min.js"></script>
17<title>
18タイトルです
19</title>
20</head>
21
22<body>
23<header>
24</header>
25<footer>
26<p class="pagetop"><a href="#wrapper">ページトップへ</a></p>
27</footer>
28</body>
29</html>

CSS
1#wrapper {
2  padding: 60px 0 0;
3}
4.pagetop {
5  display: none;
6  position: fixed;
7  right: 15px;
8  bottom: 15px;
9  width: 35px;
10  overflow: hidden;
11  border-radius: 35px;
12  -moz-border-radius: 35px;
13  -webkit-border-radius: 35px;
14}
15.pagetop a {
16  display: block;
17  overflow: hidden;
18  background: url('../img-mei/common/pagetop.svg') no-repeat center center;
19  background-size: 16px 8px;
20  background-color: rgba(0, 0, 0, 0.2);
21  padding: 35px 0 0;
22  height: 0 !important;
23}

JavaScript
1var win_w;
2var win_h;
3var w_status;
4$(document).ready(function(){
5 win_w = $(window).width();
6 win_h = $(window).height();
7 if(win_w < 768){
8 w_status = 'sp';
9 } else {
10 w_status = 'pc';
11 }
12 setTimeout(function () {
13     $('html').addClass('loading-delay');
14 }, 300);
15 $('header').load('../inc/header.html', function( response, status, xhr ) {
16        $('.sub b').on('click', function() {
17 if($('.sub').hasClass('open'))
18 {
19 $('.sub').removeClass('open');
20 } else
21 {
22 $('.sub').addClass('open');
23 }
24 return false;
25 });
26    });
27 $('footer').load('../inc/footer.html', function( response, status, xhr ) {
28 $('a[href^="#"]').on('click', function() {
29 var Hash = $(this.hash);
30 var HashOffset = $(Hash).offset().top;
31 if(win_w < 768){
32 HashOffset = HashOffset - 60;
33 }
34 $("html,body").animate({
35 scrollTop: HashOffset
36 }, 1000);
37 return false;
38 });
39    });
40 var ua = navigator.userAgent;
41 if ((ua.indexOf('iPhone') > 0) || ua.indexOf('iPod') > 0 || (ua.indexOf('Android') > 0 && ua.indexOf('Mobile') > 0)) {
42 $('.tel').each(function(){
43 var str = $(this).find('b').text();
44 $(this).find('b').html($('<a>').attr('href', 'tel:' + str.replace(/-/g, '')).append(str + '</a>'));
45 });
46 }
47 var scrollpos;
48 $(document).on('click', '.menu', function(){ 
49 win_h = $(window).height();
50 var gn_h = win_h - 60; 
51 if($('header').hasClass('active'))
52 {
53 $('body').removeClass('fixed').css({'top': 0});
54 window.scrollTo( 0 , scrollpos );
55 $('header').removeClass('active');
56 } else
57 { 
58 scrollpos = $(window).scrollTop();
59 $('body').addClass('fixed').css({'top': -scrollpos});
60 $('header').addClass('active');
61 $('.gnavi_area').css('height', gn_h);
62 }
63 return false;
64 });
65});
66$(window).on('load',function(){
67 pagetop();
68});
69var timer1 = null;
70$(window).on('orientationchange resize',function(){
71 if( timer1 == null )
72 {
73 timer1 = setTimeout(function() { 
74 win_w = $(window).width();
75 win_h = $(window).height();
76 timer1 = null;
77 }, 10);
78 }
79});
80var timer2 = null;
81$(window).on('scroll', function(){ 
82 if( timer2 == null )
83 {
84 timer2 = setTimeout(function() { 
85 pagetop();
86 timer2 = null;
87 }, 10);
88 }
89});
90function pagetop(){
91 var cpoint = 100;
92 var element = $('.pagetop');
93 var visible = element.is(':visible');
94 if ($(window).scrollTop() > cpoint) {
95 if( !visible ){ element.fadeIn(); } 
96 } else if( visible ){
97 element.fadeOut(); 
98 }
99}

m.ts10806

2022/09/19 07:07

HTMLも一部ではなく全て提示してください。現時点では・どこにJavaScript,CSSが書かれているのか・書いたJavaScriptが動作できるような準備がされているのか分かりません。

arianp

2022/09/19 07:23 編集

ご指摘ありがとうございます。情報が足りておらず申し訳ございません。依頼されたものなので、どこまでこちらに載せていいのかわからないのですが、こちらでわかりますでしょうか。 <!DOCTYPE html> <html lang="ja"> 省略 <script src="./js/func.js"></script> <body> <header> 省略 </header> <footer> <p class="pagetop"><a href="#wrapper">ページトップへ</a></p> </footer> </body> </html>

m.ts10806

2022/09/19 07:29

省略は極力ない方が。せめて「現象が再現する最小構成のコード」を提示してもらえると。多くは手元で動作確認するので、余計なものや下手に両者くされ過ぎたりすると手元で再現できずにアドバイスできないことになるからです。 https://teratail.com/help/question-tips#questionTips35

arianp

2022/09/19 07:39

質問に不慣れで申し訳ありません。詳しくありがとうございます。こちらで大丈夫でしょうか？ <!DOCTYPE html> <html lang="ja"> <head prefix="og: https://ogp.me/ns#"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="format-detection" content="telephone=no,email=no,address=no"> <meta name="description" content="説明文"> <meta property="og:site_name" content="説明文"> <link href="./font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js"></script> <link rel="stylesheet" href="./css/style-smist.css"> <link rel="stylesheet" href="./css/lightbox/lightbox.min.css"> <script src="./js/jquery.js"></script> <script src="./js/func.js"></script> <script src="./js/smist2.js" type="text/javascript"></script> <script src="./js/lightbox/lightbox.min.js"></script> <title> タイトルです </title> </head> <body> <header> </header> <footer> <p class="pagetop"><a href="#wrapper">ページトップへ</a></p> </footer> </body> </html>

m.ts10806

2022/09/19 07:48 編集

質問本文更新を。ただ、JavaScriptのコードもそうですが、「ページのトップへ戻るボタン」関連以外のものも多いように見えます。関連のものだけ添付されたほうが問題切り分けにもなります。

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

回答1件

ベストアンサー

省略の中がどうなっているか分かりませんが、
JavaScriptがjQueryの機能利用前提で組まれているのでjQuery本体を先に読み込まないことには動作しません。
ブラウザ開発ツールのコンソールにエラーも出ているのではないでしょうか。

追記のコードから

jQuery本体が複数読み込まれているのも問題になり得ます。

更に

ブラウザ開発ツールのコンソール確認するとエラー出てるようです。

console
1Uncaught TypeError: $(...).offset() is undefined

offset()使ってる箇所というと以下

var HashOffset = $(Hash).offset().top;

でおそらく問題は

var Hash = $(this.hash);

ここでHashが空のオブジェクトではないかという点。

 var Hash = $(this.hash);
 console.log(Hash) //Object {  }

上記の通り。
this.hashの値で指定可能なセレクタを持った要素があるかということになります。
this.hashは#wrapperとなっているようなので、wrapperというidを持った要素があるかどうかで、
現状のHTMLには存在しないため、空のオブジェクトになり、空のオブジェクトには何も定義されていないため
$(...).offset() is undefinedとなっているわけですね。

本件のみを確認するためには無関係なjsファイルやCSSファイルが読み込まれているようなので、
こちらで勝手に削除したところもあり、質問者さんと全く同じコードにはなってないと思いますが、
適当な要素にその名前のIDを与えたらその要素のところまでスクロールするようにはなりました。

操作や使いたい要素、対象の要素が間違いなくHTML上にあることは確認してください。
※もちろん様々な影響があるので、個々の機能「だけ」に必要な要素で動作確認をしてから結合するようにしてください。

投稿2022/09/19 07:27

編集2022/09/19 08:32

m.ts10806

総合スコア80888