「:target」疑似クラスを考慮したスムーススクロール
ページ内でアンカーリンクさせる場合、
何も設定しないと急激に動いてしまい、動きとしてあまり見栄えが良くないため、
jQueryなどJavaScriptを使ったスムーススクロールを導入することが多いです。
ただ、この場合、急激な動作を避けるために、<a>のクリックイベントに対して”return false;”をかけて、
実際にはリンクさせないようにするのですが、
CSS3ではアンカーリンクさせた要素に対してスタイルを設定することができる、
「:target」という疑似クラスがあり、
通常のスムーススクロールではこの「:target」を活かすことができません。
そこで、CSS3の「:target」疑似クラスに対応させられるスムーススクロールを考えてみました。
↓作ってみたもの
方法
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | $(function(){ /*------------------------------- 通常のsmooth scroll -------------------------------*/ $('a[href^=#]').click(function() { var speed = 400; var href= $(this).attr("href"); var target = $(href == "#" || href == "" ? 'html' : href); var position = target.offset().top; $('body,html').animate({scrollTop:position}, speed, 'swing'); return false; }); }); ↓ $(function(){ /*------------------------------- 「:target」に対応したsmooth scroll -------------------------------*/ $('a[href^=#]').click(function() { var speed = 400; var href= $(this).attr("href"); var target = $(href == "#" || href == "" ? 'html' : href); var position = target.offset().top; $('body,html').animate({scrollTop:position}, speed, 'swing', function(){ location.href = href; ←ここを追記 }); return false; }); }); |
方法は簡単で、
通常のスムーススクロールのアニメーション部分のコールバック関数で、
本来のリンクを強制的に行わせます。
「:target」を使うときには是非どうぞ。
Author Profile
SHARE
