例えば、 /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/ ページへのリンク)

この場合、/#abouthttp://example.com/#access は、同一ページへのリンクなので、スムーススクロールが行われます。

また、例えば /contact/ ページから /#about へリンクした際も、ページ遷移後にスムーススクロールが行われます。これはsmooziee.jsの特長のひとつである、別ページスムーススクロールです。(オンオフ可能)。

ちなみに、他ページへのリンク時のスクロールのみをオフにすることもできます。この場合、リンク先URLの変換は行われません。(変換についてはsmooziee.jsの仕組みを参照ください。)また、オフにした場合も、絶対パスで指定されたページ内リンク時のスクロールは行われますので、それだけでも使用メリットはあります。

以上のように、「トップページの場合は#から始まるリンクで、それ以外は…」など、トップページとそれ以外のページで違うメニューを用意することなく、スムーススクロールを実現させることができます。

さらに、アドレスバーに直接ハッシュタグ付きのURLを入力した場合は、スクロールせず、通常の表示となります。

注意点として、例えば http://example.com/http://example.com/index.html は別ページと判別される仕様です。クエリパラメータが異なる場合も同様に別ページとして扱われます。