タイトルが （謎） な感じですが......
ページ内リンクでページ上部に移動させたりするとき、最近は所謂スムーズスクロールってやつを実装するのが当たり前になっていますよね。パッと瞬時に画面が切り替わってしまうと、ページ内で移動したことがわかりにくいので、スクロール処理を入れることでわかりやすくしてあげましょうって言う、親切心から採用されるケースが多いと思います。
実装方法は JavaScript と CSS アニメーションの組み合わせや、JavaScript （というか jQuery） でというのが多いと思いますが、今回はそのスムーズスクロールの実装方法はどれが良いのかとか、そもそもの是非 （好き嫌いとか？） についてはとりあえず置いておいて、画面が移動したのがわかるようにするなら、「スクロール」 以外でもできるんじゃないの？ という実験です。
ページ内リンクをクリックした時に画面を点滅させてみる
ということで、記事タイトルにつながるわけですが、「スクロール」 っていう動作以外で、画面が移動したことを視覚的にわからせる方法として、ページ内リンクをクリック （タップ） したときに、画面を一瞬点滅させたら、なんか切り替わったなって思わせられないかなと思って試してみたところ、個人的には結構良いかもと思ったので書いてみましたよと言う話です。
この方法だとソースコードが （jQuery を使っていますが） 超簡単になるメリットもあります。
画面を一瞬点滅したように見せるソースコード
ということで、ソースコードを下記に。前述の通り、超簡単です。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$(function(){
$('a[href^=#]').click(function() {
$('body').css('opacity', '.2').animate({'opacity': '1'}, 'slow');
});
});
</script>
1行目は単純に jQuery を読み込んでいるだけなのでどうでもいいんですが、2つめの script 要素内が本題です。といっても、ページ内リンク （フラグメント識別子を持ったリンク） をクリックした時に、まず $('body').css('opacity', '.2') して、続けて .animate({'opacity': '1'}, 'slow') しているだけ。これで一瞬ページ全体が点滅 （フラッシュ） したように見えます。
実際のデモは下記に用意しました。下までスクロールするとページ上部に戻るリンクがあるのでクリックしてみてください。
こっち方がスムーズスクロールよりいいよとか、そんなことを言うつもりはありません。ちょっと思いついたのでとりあえず書いてみました。あくまで 1つの案として参考まで。
スムーズスクロールを CSS だけで実現する
おまけですが、スムーズスクロールについては、scroll-behavior プロパティ、およびその値、smooth を使用することで CSS のみで実現することができます。
まだ対応しているブラウザが Firefox （36 以降） と、Chrome （ただし、デフォルトでは無効） しかないので、現時点では使える範囲は限られていますが、スムーズスクロールのためだけに JavaScript 書いたりするの面倒くさいので早いところ広まったらいいなと思います。
ちなみに scroll-behavior プロパティの仕様は下記。
過去、Firefox Nightly が scroll-behavior プロパティを先行実装したときに下記の記事で少し詳しく触れていますのでこちらも参考までにどうぞ。
