March 28, 2017
例えば、 /test/#link のように、ルート相対パス + ハッシュタグで指定されたリンクでも、同じページへのリンクであればページ遷移せずにスムーススクロールを行うことができます。
これがどんな場面で有効かというと、例えば、WordPressで作成したサイトで、メニューにトップページのid要素へのリンクと、他ページへのリンクが共存している時。メニューは各ページ共通にするとなると、メニューのリンク先はこんな感じになると思います。
/#about (トップページのaboutへのリンク)/#access (トップページのaccessへのリンク)/contact/ (/contact/ ページへのリンク)もしくは絶対パスでこんな感じ
http://example.com/#about (トップページのaboutへのリンク)http://example.com/#access (トップページのaccessへのリンク)http://example.com/contact/ (/contact/ ページへのリンク)この場合、/#about や http://example.com/#access は、同一ページへのリンクなので、スムーススクロールが行われます。
また、例えば /contact/ ページから /#about へリンクした際も、ページ遷移後にスムーススクロールが行われます。これはsmooziee.jsの特長のひとつである、別ページスムーススクロールです。(オンオフ可能)。
ちなみに、他ページへのリンク時のスクロールのみをオフにすることもできます。この場合、リンク先URLの変換は行われません。(変換についてはsmooziee.jsの仕組みを参照ください。)また、オフにした場合も、絶対パスで指定されたページ内リンク時のスクロールは行われますので、それだけでも使用メリットはあります。
以上のように、「トップページの場合は#から始まるリンクで、それ以外は…」など、トップページとそれ以外のページで違うメニューを用意することなく、スムーススクロールを実現させることができます。
さらに、アドレスバーに直接ハッシュタグ付きのURLを入力した場合は、スクロールせず、通常の表示となります。
注意点として、例えば http://example.com/ と http://example.com/index.html は別ページと判別される仕様です。クエリパラメータが異なる場合も同様に別ページとして扱われます。