ページ内リンクでURLを変えたくない時の対処法
ロングページのユーザビリティを手軽に向上してくれるページ内リンク(目次やTOPへ戻るetc.)は便利なものですが、常に気なっているというか、気持ち悪いなーと思っていた点がありました。それは…
#リンクをクリックした直後 、URLが変わってしまうこと
です。なんだそんなこと?…と思われた方はスルーして下さい。
とりあえず、今回はページ内リンクをスムーズスクロールしつつ、URLに「#」が付かないスクリプトを見付けたので備忘録としてメモ。
この事象に対応するスクリプトは探せば色んなものがありますし、個人的にも色々試してみましたが、どのようなページであっても概ね問題なく機能するのが以下の方法です。
準備
jQueryを使用するため、ページ内に以下コードを追加。
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
バージョンを間違えたりすると、動かない場合があるので注意です。
スクリプト設置
記述したjQueryファイル読み込み記述後に、以下スクリプトを記述。
<script type="text/javascript">
$('a[href^="#"]').click(function(){
var speed = 500; //スクロールスピード
var href= $(this).attr("href");
var target = $(href == "#" || href == "" ? 'html' : href);
var position = target.offset().top;
$("html, body").animate({scrollTop:position}, speed, "swing");
return false;
});
</script>
※上記記事を参考にさせて頂きました
以下の方法もあります。こちらはjquery不要で、ページ内リンクと同時にヘッダの高さ分位置調整まで出来ちゃいます!
<script>
$(document).ready(function(e) {
var headerHight = 80; //ヘッダ高さ
$('a[data-area]').click(function() {
var href = '#' + $(this).attr("data-area");
var target = $(href == "#" || href == "" ? 'html' : href);
console.log(target);
var position = target.offset().top - headerHight;
$("html, body").animate({
scrollTop: position
}, 550, "swing");
return false;
});
});
</script>
この方法の場合、ページ内リンクの貼り方はhrefではなくdataになります。
<ul>
<li ><a data-area="area01">メニュー1</a></li>
<li ><a data-area="area02">メニュー2</a></li>
<li ><a data-area="area03">メニュー1</a></li>
</ul>
ただし、マウスオーバーした際にリンクカーソルじゃなくなってしまう点だけ注意が必要です。
宜しければ………