ページ内スクロールを実装したい。（jQueryプラグイン上で動作させたい）

Question

###前提・実現したいこと
Japan Mapのプラグインを用いて、ページ内スムーズスクロール（するするっと動くやつ）を実装したいと考えております。

###試したこと＆概要
Japan Mapのプラグインとしては、現在以下の通り設定し、「ページ内に設定したリンクに移動」自体はできるようになっております。
（すなわち、該当の箇所をクリックすると、指定したidに移動するようになっている。）

$(function() {
            var areaLinks = {
                1: "#sec1",
                2: "#sec2",
                3: "#sec3",
                4: "#sec4",
                5: "#sec5",
                6: "#sec6",
                7: "#sec7",
            };
            var areas = [{
                    code: 1,
                    name: "北海道",
                    color: "#ca93ea",
                    hoverColor: "#e0b1fb",
                    prefectures: [1]
                },
                {
                    code: 2,
                    name: "東北",
                    color: "#a7a5ea",
                    hoverColor: "#d6d4fd",
                    prefectures: [2, 3, 4, 5, 6, 7]
                },
                {
                    code: 3,
                    name: "関東",
                    color: "#84b0f6",
                    hoverColor: "#c1d8fd",
                    prefectures: [8, 9, 10, 11, 12, 13, 14]
                },
                {
                    code: 4,
                    name: "中部",
                    color: "#52d49c",
                    hoverColor: "#93ecc5",
                    prefectures: [15, 16, 17, 18, 19, 20, 21, 22, 23, 24]
                },
                {
                    code: 5,
                    name: "近畿",
                    color: "#f2db7b",
                    hoverColor: "#f6e8ac",
                    prefectures: [25, 26, 27, 28, 29, 30]
                },
                {
                    code: 6,
                    name: "中国・四国",
                    color: "#f9ca6c",
                    hoverColor: "#ffe5b0",
                    prefectures: [31, 32, 33, 34, 35, 36, 37, 38, 39]
                },
                {
                    code: 7,
                    name: "九州・沖縄",
                    color: "#f7a6a6",
                    hoverColor: "#ffcece",
                    prefectures: [40, 41, 42, 43, 44, 45, 46, 47]
                },
            ];

また、ページ内スクロールについては、サイトを参考にし以下を記述しております。

   $(function(){
	$('a[href^=#]').click(function(){
		var speed = 500;
		var href= $(this).attr("href");
		var target = $(href == "#" || href == "" ? 'html' : href);
		var position = target.offset().top;
		$("html, body").animate({scrollTop:position}, speed, "swing");
		return false;
	});
});

これで動かなかったのですが、以上のコードはjQueryプラグインを前提にしたものではないので、動かないのも当然といえば当然かな・・・という気はしております。

個人的には

'a[href^=#]'

の部分を適切な形にすれば動くんじゃないかと考えているのですが、どなたか解決策ご存知でしたらご教示頂けると助かります。

何卒、よろしくお願いいたします。

###サンプルページ
恐らく上記で分かりにくかったかもしれず、取り急ぎサンプルページを作成しましたのでご覧ください。

Comments

[karamarimo]

「該当の箇所をクリックすると、指定したidに移動するようになっている。」の該当のコード、また Japan Map を使用している部分のコードも載せてください。

[yafoo]

ご指摘ありがとうございます。経験不足のせいかなかなか文字で説明しにくいので、取り急ぎサンプルページを作成しました。どうでしょうか・・・？？

[yafoo]

あと、サンプルなんで北海道・東北・関東しか作っていないですけどネ。

Answer 1

   $(function(){
    $('a[href^=#]').click(function(){
        var speed = 500;
        var href= $(this).attr("href");
        var target = $(href == "#" || href == "" ? 'html' : href);
        var position = target.offset().top;
        $("html, body").animate({scrollTop:position}, speed, "swing");
        return false;
    });
});

これは「aタグをクリックしたときにスクロールする」だけです。これとは無関係に、エリアをクリックしたときの動作は、提示していただいたサンプルページでは下のonSelectで実装されています。

            $("#map-container").japanMap({
                areas: areas,
                selection: "area",
                ... ,
                onSelect: function(data) {
                    location.href = areaLinks[data.area.code];
                }
            });

このonSelectで最初のスクロールの処理を書けばいいのではないでしょうか。

追記

DEMO(JSFiddle)

スクロール後にwindow.location.hash = hash;でurlを変えています。

Comments

[yafoo]

すみません、恐らくこれが解決策だと思い何回かコードを書いてみたのですが、「全く状況が変化しない」「逆にクリックしても何も反応しなくなった」の繰り返しで上手くいかない状況です・・・。
（当方、HTMLとCSSはある程度分かるのですが、jQueryは全くのど素人状態です・・・）

申し訳ありませんが、具体的にコードを提示頂くことは可能でしょうか？
自分ももう少しjQuery勉強しようと思っています・・・。

[karamarimo]

demoを追加しました。

[yafoo]

ありがとうございます、無事解決しました。

Answer 2

karamarimoさんの回答で解決だと思いますが、小ネタ。

html {
  scroll-behavior: smooth;
}

https://developer.mozilla.org/ja/docs/Web/CSS/scroll-behavior
https://www.w3.org/TR/cssom-view-1/#propdef-scroll-behavior

Answer 3

「スムーススクロールスクリプト」のhead内での読込位置が悪いのかも知れません。および「async属性」を追加して見てください。

Answer 4

position正しく取れてます？

        var href= $(this).attr("href");
        var target = $(href == "#" || href == "" ? 'html' : href);

なにかココらへんがおかしい気がするのですが。

<a href="#test">jump!</a>
~~~~~~~~~~~略~~~~~~~~~~~~~
<a name="test" id="test">ここ！</a>

こうだとしてid="test"にジャンプしたいとしたら

  $('html, body').animate({
    scrollTop: $( $(this).attr('href') ).offset().top
  }, 500);

こんな感じでいいんじゃないです？