サーバーにアップロード後、Javascriptを読み込まなくなる問題

前提・実現したいこと

【前提】
サーバーアップロード前のローカル環境では、ちゃんとJavascriptを読み込んで動作しているのですが、サーバーへアップロードすると、Javascriptを読み込めておらず、動作しなくなります。

【実現したいこと】
サーバー上でもJavascriptを動作させたい。

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

ドメイン直下のindex.htmlでは、正常にJavascriptは動作していますが、その他のページでは、動作しなくなっています。以下に、Javascriptの読み込みコードを記載します。
場所は<head>内と、</Body>の直前に記載してます。

該当のソースコード

<head>内 ```Javascript <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> <script type="text/javascript"> $(function() { var showFlug = false;

var topBtn = $('#page-top');
	
topBtn.css('bottom', '-100px');
var showFlug = false;
$(window).scroll(function () {
	if ($(this).scrollTop() > 500) {
		if (showFlug == false) {
			showFlug = true;
			topBtn.stop().animate({'bottom' : '0px'}, 200); 
		}
	} else {
		if (showFlug) {
			showFlug = false;
			topBtn.stop().animate({'bottom' : '-100px'}, 200); 
		}
	}
});


//スクロールしてトップ


topBtn.click(function () {
	$('body,html').animate({
		scrollTop: 0
	}, 1200);
	return false;
});

});
</script>

<script>
  $(function(){
    // #で始まるリンクをクリックしたら実行されます
    $('a[href^="#"]').click(function() {
      // スクロールの速度
      var speed = 1300; // ミリ秒で記述
      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>直前
```Javascript
<script type="text/javascript" src="../script/stickyheader.js"></script>
<script type="text/javascript" src="../script/stickysidebar_sub.js"></script>
<script type="text/javascript" src="../script/smooth_scroll.js"></script>
<script type="text/javascript" src="../script/humberger.js"></script>
<script type="text/javascript" src="../script/animation_huwa.js"></script>

それぞれのjavascriptのコード
①stickeyheader.js

Javascript
1//スティッキーヘッダー
2$(function(){
3    //スティッキーヘッダーの処理
4    $('header').each(function(){
5        var $window = $(window),
6            $header = $(this),
7            headeBoxTop = $header.offset().top;
8        $window.on('scroll',function(){
9            if($window.scrollTop()>headeBoxTop){
10                $header.addClass('sticky');
11            } else {
12                $header.removeClass('sticky');
13            }
14        });
15        $window.trigger('scroll');
16    });
17});

②stickysidebar_sub.js

Javascript
1// JavaScript Document
2
3$(function () {
4  $(window).scroll(function () {
5    if ($(this).scrollTop() > 370) { //100px以上スクロールした固定
6      $('#book_side_bar').addClass('fixed');
7    } else {
8      $('#book_side_bar').removeClass('fixed');
9    }
10  });
11});
12
13

③smooth_scroll.js

Javascript
1// JavaScript Document
2$(function(){
3  $('a[href^="#"]').click(function(){
4    var speed = 500;
5    var href= $(this).attr("href");
6    var target = $(href == "#" || href == "" ? 'html' : href);
7    var position = target.offset().top;
8    $("html, body").animate({scrollTop:position}, speed, "swing");
9    return false;
10  });
11});
12

④script/humberger.js

Javascript
1// JavaScript Document
2
3 //ハンバーガーメニュー
4$(function() {
5    $('.hamburger').click(function() {
6        $(this).toggleClass('active');
7 
8        if ($(this).hasClass('active')) {
9            $('.globalMenuSp').addClass('active');
10        } else {
11            $('.globalMenuSp').removeClass('active');
12        }
13    });
14});
15

⑤animation_huwa.js

Javascript
1// JavaScript Document
2
3$(function(){
4	$(window).on('load scroll',function (){
5		$('.animation').each(function(){
6			//ターゲットの位置を取得
7			var target = $(this).offset().top;
8			//スクロール量を取得
9			var scroll = $(window).scrollTop();
10			//ウィンドウの高さを取得
11			var height = $(window).height();
12			//ターゲットまでスクロールするとフェードインする
13			if (scroll > target - height){
14				//クラスを付与
15				$(this).addClass('active2');
16			}
17		});
18	});
19});

試したこと

①以下のように絶対パスへの変更を試みましがダメでした。

Javascript
1<script type="text/javascript" src="https://サイトのドメイン/script/stickyheader.js"></script>
2<script type="text/javascript" src="https://サイトのドメイン/script/stickysidebar_sub.js"></script>
3<script type="text/javascript" src="https://サイトのドメイン/script/smooth_scroll.js"></script>
4<script type="text/javascript" src="https://サイトのドメイン/script/humberger.js"></script>
5<script type="text/javascript" src="https://サイトのドメイン/script/animation_huwa.js"></script>

②script呼び出しコードの場所を</Body>直前ではなく、<head>内に場所を変えてみるが、これもダメでした。

③Xserverを使っており、ディレクトリ構成がhttps://サイトのドメイン/public_html/script/jsファイルだったので、同じように記載したがそれもダメでした。

補足情報（FW/ツールのバージョンなど）

サーバーはxserverを使用。
PC環境：windows10
ブラウザ：Googlechrome ver.88.0.4324.190、Firefox ver.86.0

＊読み込みに成功しているドメイン直下のindex.htmlの呼び出しも記載しておきます。
場所は<head>内に記載してます。

javascript
1<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
2<script type="text/javascript">
3$(function() {
4	var showFlug = false;
5	
6	var topBtn = $('#page-top');
7		
8	topBtn.css('bottom', '-100px');
9	var showFlug = false;
10	$(window).scroll(function () {
11		if ($(this).scrollTop() > 500) {
12			if (showFlug == false) {
13				showFlug = true;
14				topBtn.stop().animate({'bottom' : '0px'}, 200); 
15			}
16		} else {
17			if (showFlug) {
18				showFlug = false;
19				topBtn.stop().animate({'bottom' : '-100px'}, 200); 
20			}
21		}
22	});
23	
24	
25	//スクロールしてトップ
26    
27	
28	topBtn.click(function () {
29		$('body,html').animate({
30			scrollTop: 0
31		}, 1200);
32		return false;
33    });
34});
35</script>
36
37<!-- ここまでトップへ戻るの記述 -->
38
39<!-- その他　script-->
40
41  <script type="text/javascript" src="script/stickysidebar.js"></script>
42  <script type="text/javascript" src="script/stickyheader.js"></script>
43  <script type="text/javascript" src="script/animation_huwa.js"></script>
44  <script type="text/javascript" src="script/jquery-3.5.1.min.js"></script>
45  <script type="text/javascript" src="script/jquery-ui-1.10.3.custom.min.js"></script> 
46  <script type="text/javascript" src="script/smooth_scroll.js"></script>
47 
48
49<!-- ＃リンクのスムーズスクロール -->
50    <script>
51      $(function(){
52        // #で始まるリンクをクリックしたら実行されます
53        $('a[href^="#"]').click(function() {
54          // スクロールの速度
55          var speed = 1300; // ミリ秒で記述
56          var href= $(this).attr("href");
57          var target = $(href == "#" || href == "" ? 'html' : href);
58          var position = target.offset().top;
59          $('body,html').animate({scrollTop:position}, speed, 'swing');
60          return false;
61        });
62      });
63    </script>
64    
65     <script type="text/javascript" src="script/humberger.js"></script>

よろしくお願いいたします。

hentaiman

2021/02/27 17:04

読み込めないの意味はちゃんとファイルは存在して開くことが出来ていてhtml内に書いたパスも正しい事が判明しているのに読めないという事？

meg_

2021/02/27 17:05

エラーは出ていませんか？

sakunyaro

2021/02/27 23:16

hentaimanさんご質問ありがとうございます。はい、ちゃんとファイルは存在していて、ブラウザの検索するところにhttps://サイトのドメイン/script/stickyheader.jsと打ってアクセスしても、jsファイルは開けるので、パスも正しいと思うのですが。。

sakunyaro

2021/02/27 23:18

Meg_さんご質問ありがとうございます。初心者ですみません、エラーの確認はどこかで出来るのでしょうか？それとも、サイトを開いた途端ポップアップみたいなもので、忠告されるのでしょうか？

sakunyaro

2021/02/27 23:33

デベロッパーツールのconsoleで確認できるんですね！ちぇっくしましたが、エラーは出ていないようで、 > のマーク以外、何も表示はありませんでした。

hentaiman

2021/02/28 00:25

では読み込まなくなるという表現を改めて、何をした時（動作条件やきっかけとなるイベントの明記）にこの処理（jsの行数や関数の明記）が動くはずなのに動かない（または予定外の動作・実際の動作）を質問に記載してくださいそれをする事によって質問者自身で調査が進んで解決するかもしれないし、そうでなくても閲覧者で指摘できる事があるかもしれません

dit.

2021/03/01 06:41

このようなディレクトリ構造という認識でよろしいですか？ [public_html]（サーバー指定のルートディレクトリ）　　├index.html 　　├[scriptフォルダ] 　　│　　　　　　　　└ (JSファイル群) 　　└[何かしらのフォルダ] 　　　　　　　　　　　└ (「その他のページ」のHTMLファイル群)

sakunyaro

2021/03/01 10:10

hentaimanさんありがとうございます。一つ一つまとめてみたいと思います。

sakunyaro

2021/03/01 10:12

dit.さんありがとうございます。はい、その通りのディレクトリ構造になっています。 [public_html]（サーバー指定のルートディレクトリ）　　├index.html 　　├[フォルダ名”script"] 　　│　　　　　　　　└ (JSファイル群) 　　└[何かしらのフォルダ] 　　　　　　　　　　　└ (「その他のページ」のHTMLファイル群) です。