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
は別ページと判別される仕様です。クエリパラメータが異なる場合も同様に別ページとして扱われます。