［み］jQueryでページ外リンクでも、指定位置にスムーズスクロールさせる方法

みはら.comでも設置している「PAGE TOP arrowup」のように、ページ内リンクでスムーズにスクロールさせるのはよく見かけるパターンのやつだと思います。

でも、グローバルナビなどでドロップダウンメニューにしていて、アンカーをつけてリンク先を指定している場合なんかもあるんではないでしょうか？こんな感じのコードの時です。

HTML

<nav>
	<ul>
		<li>
			<a href="index.html">HOME</a>
		</li>
		<li>
			<a href="about.html">ABOUT</a>
			<ul>
				<li><a href="about.html#company">COMPANY</a></li>
				<li><a href="about.html#member">MEMBER</a></li>
			</ul>
		</li>
		<li>
			<a href="works.html">WORKS</a>
			<ul>
				<li><a href="works.html#website">WEBSITE</a></li>
				<li><a href="works.html#logo">LOGO</a></li>
			</ul>
		</li>
		<li>
			<a href="contact.html">CONTACT</a>
		</li>
	</ul>
</nav>

例えば、MEMBERをクリックすると、id=memberを指定したところへ移動するんですが、ページの途中なので、するするーっとスクロールした方が、コンテンツの長さとか見えていい感じですよね。

ページ外リンクでも、指定位置にスムーズスクロールさせる方法

まずは、htmlの方を少し変更します。#で位置を指定していたのを、?id=に変更します。さっきの例でいくとこんな感じです。

HTML

<nav>
	<ul>
		<li>
			<a href="index.html">HOME</a>
		</li>
		<li>
			<a href="about.html">ABOUT</a>
			<ul>
				<li><a href="about.html?id=company">COMPANY</a></li>
				<li><a href="about.html?id=member">MEMBER</a></li>
			</ul>
		</li>
		<li>
			<a href="works.html">WORKS</a>
			<ul>
				<li><a href="works.html?id=website">WEBSITE</a></li>
				<li><a href="works.html?id=logo">LOGO</a></li>
			</ul>
		</li>
		<li>
			<a href="contact.html">CONTACT</a>
		</li>
	</ul>
</nav>

続いて、jQueryのほうは、こんな感じです。

JavaScript

$(function() {
    var url = $(location).attr('href');
    if(url.indexOf("?id=") != -1){
        var id = url.split("?id=");
        var $target = $('#' + id[id.length - 1]);
        if($target.length){
            var pos = $target.offset().top;
            $("html, body").animate({scrollTop:pos}, 1500);
        }
    }
});

urlの中の?id=を探して、そのidがついた要素のところにスクロールさせるっていうことです。