スムーススクロールリンクと通常リンクの自動判別とエフェクト追加方法
ウェブページ内でのスムーススクロールリンクはユーザーエクスペリエンスの向上に貢献します。しかし、外部ページへのリンクや、異なるページ内のアンカーリンクではスムーススクロールを適用することが困難です。この記事では、同じページ内のリンクに自動でスムーススクロールを適用し、異なるページへのリンクには通常のリンクとして動作させる方法、さらにリンク移動中にエフェクトを追加する方法を紹介します。
1. URL判定によるスムーススクロールの適用
まず、クリックされたリンクが現在のページのアンカーへのリンクであるかどうかを判定する方法です。
const link = document.querySelector('a');
link.addEventListener('click', function(event) {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '')
&& location.hostname == this.hostname) {
event.preventDefault();
// ここにスムーススクロールの処理を書く
}
});
2. リンク移動中のエフェクトの追加
次に、リンクがクリックされた際に特定のエフェクト（例: フェードアウト）を追加する方法を紹介します。
HTML:
<div id="fade-overlay"></div>
CSS:
#fade-overlay {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background-color: #000;
opacity: 0;
pointer-events: none;
z-index: 9999;
transition: opacity 0.3s;
}
JavaScript:
const fadeOverlay = document.getElementById('fade-overlay');
fadeOverlay.style.opacity = 1;
// 一定時間後にオーバーレイを透明にする
setTimeout(() => {
fadeOverlay.style.opacity = 0;
}, 700);
3. まとめ
この方法を使用することで、ページ内のリンクにはスムーススクロールを、外部ページや異なるページへのリンクには通常のリンクの動作を自動で適用することができます。さらに、リンク移動時にエフェクトを追加することも可能です。このテクニックを利用することで、ウェブページの制作やメンテナンスが大幅に簡単になります。
