Blog

「:target」疑似クラスを考慮したスムーススクロール

2015.03.04Cat:css3 jQuery

ページ内でアンカーリンクさせる場合、

何も設定しないと急激に動いてしまい、動きとしてあまり見栄えが良くないため、

jQueryなどJavaScriptを使ったスムーススクロールを導入することが多いです。

 

ただ、この場合、急激な動作を避けるために、<a>のクリックイベントに対して”return false;”をかけて、

実際にはリンクさせないようにするのですが、

CSS3ではアンカーリンクさせた要素に対してスタイルを設定することができる、

「:target」という疑似クラスがあり、

通常のスムーススクロールではこの「:target」を活かすことができません。

 

そこで、CSS3の「:target」疑似クラスに対応させられるスムーススクロールを考えてみました。

 

↓作ってみたもの

 DEMO

 

方法

方法は簡単で、

通常のスムーススクロールのアニメーション部分のコールバック関数で、

本来のリンクを強制的に行わせます。

 

「:target」を使うときには是非どうぞ。

Author Profile

ninomiya
ninomiya

Webデザイナー兼コーダーです。
イラストを描くのも好きです。
SVGとCanvasを使ったWEBアプリにも興味があります。
よろしくお願いいたします。

» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ