jquery ナビのスムーズスクロール リンクができない件について

Question

jqueryのスムーズスクロールについて質問させていただきたいです。

ヘッダーのリンクからjqueryのスムーズスクロールを利用してリンクをさせたいのですが、リンクをクリックしてもリンクしない状況です。
原因がわからずこちらに投稿させていただきました。jquery本体や、jqueryを記載したjsファイルは読みこまれております。

下記にhtmlのコード、コードに該当する部分のcss、jqueryの内容を記載いたします。
よろしくお願いいたします。

●htmlヘッダー部分のコード
下記<ul class="nav-menu">内のリンクから#works1と#works2のidがついたページ下部のコンテンツにスムーズスクロールさせたいです。

        <header id="header">
            <section class="header-menu">
                <div class="inner">
                    <div class="inner-left">
                        <img src="assets/img/img_logo.png" alt="XXXXX">
                    </div>
                    <div class="inner-right">
                        <nav>
                            <ul class="nav-menu">
                                <li><a href="#works1" class="anchor"><span>works1</span><br><span>実績1</span></a></li>
                                <li><a href="#works2" class="anchor"><span>works2</span><br><span>実績2</span></a></li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </section>
        </header>

●上記id="header"部分のcssのコード

#header {
    background: url(../img/img_mv.jpg) no-repeat left top;
    height: 900px;
    background-size: 70% 100%;
}

●jqueryの内容

$(function () {
    $('a.anchor').on('click', function () {
        var speed = 400; //
        var href = $(this).attr("href");
        var destination = $(href == "#" || href == "" ? 'html' : href);
        var headerH = $('#header').height();
        var position = destination.offset().top;
        position = position - headerH;
        $("html,body").animate({
            scrollTop: position
        }, speed, 'swing');
        return false;
    });
});

Comments

[kei344]

（質問文は編集できます）質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

[退会済みユーザー]

承知しました!すみません。修正いたします。

[kei344]

回答が付いた質問の編集は慎重に行ってください。質問文のコードについて回答にて指摘があった場合は「追記」し、元のコードを編集する場合も「直したこと」がわかるようにしてください。

[退会済みユーザー]

kei344さま
ご回答くださり誠にありがとうございました。私の記入ミスがあり申し訳ありません。
<a></a>タグの中の文字が抜けておりました。
実際には文字が入っておりますので、質問内容の記述を修正させていただきました。
本当にすみません。

[退会済みユーザー]

kei344さま
サンプルも作っていただき誠にありがとうございます。
作ってくださったのと同じようにしてみたのですが、自分の環境では動かず、
他に原因がないかもう一度見てみたいと思います。

[kei344]

まだ質問が「受付中」になっていますが、いったんご自身の回答をもって「解決済」にされてはいかがでしょうか。

[退会済みユーザー]

ご指摘いただきありがとうございます!
解決済みにいたしました。この度は誠にありがとうございました!

Answer 1

調べて頂いたところ、
bodyに対してoverflow-x: hidden;を設定していたのが原因でした。
こちらを削除したところ直りました。
調査頂きありがとうございました。

Answer 2

提示の内容であれば、a要素が幅を持たないのでクリックできる状態ではないですね。

<a href="#works1" class="anchor">anchor</a>
<!--  何か文字を入れるかCSSで幅をつける ↑ -->

$(function () {
    $('a.anchor').on('click', function () {
        var speed = 400; //
        var href = $(this).attr("href");
        var destination = $(href == "#" || href == "" ? 'html' : href);
        var headerH = $('#header').height();
        var position = destination.offset().top;
        // position = position - headerH; // ← 何のためのコードかがわからない
        $("html,body").animate({
            scrollTop: position
        }, speed, 'swing');
        return false;
    });
});
```**動くサンプル：**[https://jsfiddle.net/huw6tjkr/](https://jsfiddle.net/huw6tjkr/)

Comments

[kei344]

質問が書き換わる前の回答です。
https://teratail.com/questions/history-questions/165444