a href="#"でリンク遷移させたいがjavascript void (0)がでてしまう件

質問

A href="#"で定義しているものに対し、ブラウザリロード後の動作でjavascript void (0)で無効化になってしまいます。
ブラウザリロード後も正常にa href="#"リンクが動くようにする（ページトップへ戻るボタンが正常に動くようにする）にはどこに原因があり、なにを修正したらいいのでしょうか…。

背景・事象

Webサイトのページ修正しています。
「Page Top」ボタンを右下に配置しており、ページ下スクロール時、ボタンをクリックすると同ページの上へ行く機能を a href="#" タグにてリンクさせています。
（Javascriptはこのボタンには定義していないつもりです。）

①一発目ページ開き下スクロール⇒ボタンクリック
⇒（リンク機能にて）正常に動作すること確認。

②URL が https://www.○○○/index.html#の状態になり、それをブラウザリロード⇒下スクロール⇒ボタンクリック
⇒左下に javascript void (0) が表示⇒動作無効になり、上にスクロールしなくなってしまった。

実現したいこと

・ブラウザリロード後も a href="#" が機能するようにしたい。
・javascript void(0) 表示しないようにしたい。
・もしくは、javascript を使ってもいいので、「ページトップ戻る」ボタンを正常に機能させたい。

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

javascript void (0)

該当のソースコード

html
1
21. ページトップへ戻る 該当のタグ
3<a href="#" class="gotop">PAGE TOP</a>

2.ページ内、他のscript

html
1
2■<head>内
3<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
4new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
5j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
6'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
7})(window,document,'script','dataLayer','GTM-MQ3CFHV');</script>
8
9<script type="text/javascript" src="../../js/styleswitcher.js"></script>
10<script type="text/javascript" src="../../js/smoothScroll.js"></script>
11
12
13■<body>内
14<script type="text/javascript" src="../../js/jquery.js"></script>
15<script type="text/javascript" src="../../js/jquery.cookie.js"></script>
16<script type="text/javascript" src="../../js/smartphone.js"></script>
17<script src="//code.jquery.com/jquery-1.10.1.min.js"></script>
18<script type="text/javascript" src="../../js/dropdown.js"></script>
19<script type="text/javascript" src="../../js/menu.js"></script>
20<script type="text/javascript" src="../../js/activation.js"></script>
21<script>
22$(function() {
23    $('.btn').click(function(){//headerに .openNav を付加・削除
24        $('.dropmenu').toggleClass('openmenu');
25    });
26});
27</script>
28<script>
29$(document).ready(function() {
30    var text = '';
31    $('.info').append(text);
32
33
34    $('.open').each(function(){
35        $(this).css("height",$(this).height()+"px");
36    });
37    $('.open').hide();
38    $('.btn').click(function () {
39        $('.open').slideToggle('slow');
40        $(this).toggleClass('on');
41    });
42});
43</script>

よろしくおねがいいたします。
不足等ございましたら教えていただけますと幸いです、

Cocode

2022/12/07 15:31

jQueryタグの追加をお願いします！ JavaScriptとjQueryはちょっと違います。

karin8113

2022/12/07 15:39

早速ご質問ありがとうございます！こちらのページ内で使われているjQueryは以下が全てかなと思います。（質問の回答になっていますか？(T-T)） <script type="text/javascript" src="../../js/jquery.js"></script> <script type="text/javascript" src="../../js/jquery.cookie.js"></script> <script src="//code.jquery.com/jquery-1.10.1.min.js"></script>

Cocode

2022/12/07 16:07

あ、すみませんそうではなく、現在質問の投稿に「HTML5」「JavaScript」「HTML」「CSS」と4つタグをつけてらっしゃいますが、ご質問の内容はただのJavaScriptではなく「jQuery」ですので、jQueryタグを質問を編集して追加お願いしますー！

karin8113

2022/12/07 16:36

Cocodeさんありがとうございます！！タグ追加しました～！助かります(T-T)！

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

回答1件

質問者様の不具合は私にもよくわかりませんが…誰からも回答がないみたいなので…
不具合が起こったという動作を私もしてみましたが、特に何も問題がありませんでした。
ちなみに環境はMacでChromeです。

URLの末尾に#をつけたくないとのことであれば結局JavaScript等で制御するしかないと思うのですが、それでしたら最初からJavaScriptやjQueryでページトップボタンを実装すればいいと思います。

html
1<a href="#" id="btn-pagetop" class="btn-pagetop">Page Top</a>

javascript
1jQuery(function ($) {
2  $('#btn-pagetop').on('click', function (event) {
3    // aタグのデフォルトの動きを無効化する（URLに#つかないし、上に行かなくなる）
4    event.preventDefault();
5
6    // 上に行く動作をする
7    $('body,html').animate({
8      scrollTop: 0
9    }, 300);
10
11    return false;
12  })
13})

event.preventDefault()のおかげで、aタグのデフォルトの動作を全て無効化しているので、URLの末尾に#がつかなくなります。
反面、上に行くという動作もしなくなってしまいますので、jQueryのanimate()関数を用いて、スーっと上に上に行くような動作をさせてみました。
- アニメーションが気軽につけられるのは、jQueryで実装することのメリットの1つですね。
万が一エラーが起きてJSファイルが全て無効になっていても、元はaタグで書いておりますから、そうなったらデフォルトの動きでページトップに戻ってくれるので、一応問題ありません。

投稿2022/12/09 18:45

Cocode

総合スコア2316