cashan
以前書いた東京・名古屋側のブログにて、Luxy.jsのアンカーリンクが効かない件についてのお問い合わせをいただきました。
記事の内容に興味を持ってくださり誠にありがとうございます。
確かに以前書いた記事の内容ですとざっくりすぎましたので、
お問い合わせ内容について理由と共にこちらで回答させていただければと思います。
こちらは以前書いた記事になります↓
【parallax】IEでも綺麗に動くパララックスを探してみた
Luxy.jsは画面の全てを支配します。
故にスクロールしてアクティブになっていくアンカーリンクは工夫をしない限り効きません。
注意です。（上記記事より抜粋）
Luxy.jsとは……慣性スクロールができるようになるjsプラグインです。
なぜLuxy.jsではアンカーリンクが効かないのか？
Luxy.jsが指定のコンテンツをfixedとし、画面がスクロールすることに伴ってその指定コンテンツをゆるゆると動かしているという仕組みです。（かなりざっくり）
そしてアンカーリンクが効かない原因はこの「コンテンツ全体をposition : fixed;で囲んでいるから」になります。
Luxy.jsがどうとかというお話ではなく、fixed自体がスクロールしても同じ位置に固定されていることが関係しています。
以下はluxy.jsを想定したHTMLとCSSだけの内容です。
See the Pen luxy.js & anchor link by casyan (@d-casyan) on CodePen.
これを見てもわかる通り、fixedはfixedの中身の長さがどうであれ画面に対する固定なのでそもそもスクロールが出現しません。
またfixedでない箇所にはコンテンツがないわけですので、画面の高さもありません。
これはスタック文脈という要素の重なりが大きく関係しています。
「ルート文脈」「スタック文脈」のお話はまた今度させていただければと思います。
こちら動いていないように見えますが全くもってこれは正常な動きです。
（普通に作って出したら失敗作ですけど）
Luxy.jsを使用しなくてもfixedを使用してアンカーリンクを飛ばす場面というのは必ず出て来ますのでぜひ続きもご覧になってください。
どうやってfixedにアンカーリンクを効かせるのか
またまたざっくりと答えますと「コンテンツの位置を取得できれば良い」です。
Javascriptならこれが可能です。
以下はjQueryでアンカーリンクと、コンテンツの場所を見に来たらナビゲーションにclassが付くというものです。
こちらと組み合わせて使用してみましょう。
ここでまた注意なのが、
Luxy.jsで指定したコンテンツそのものがfixedとなり、慣性スクロールになるので、
アンカーリンクそのものを慣性させたくない場合はLuxy.jsで指定したコンテンツより外側に置いてfixedとする必要があります。
できあがったものがこちらになります。
Luxy.jsを使用しながらもアンカーリンクが働いていることがわかると思います。
これはoffset()などで座標を読み取っているので、単純なアンカーリンクの動きとは違い、数値を示してそこへ飛ばしているということになります。
さらに慣性でゆるっと座標をプラスしたりマイナスしたりもされますので、飛ぶ先へ50px〜100pxを増減させておいてください。
まとめ
今回はかなりざっくりと書きましたが、fixedやjavascriptの設定方法についてはもっと深いお話がたくさんあります。
アニメーションが増えて来た近年、CSSのpositionや、javascriptの座標取得とは仲良くなっておきたいですね！
