ページ内リンクをシュイーンとアニメーションかける方法は以下のjQueryで設置可能。
$(function() { $('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; }); });
この場合だと、hrefに「#」を指定したリンクは全てスムーズスクロールが発生してしまう。
↓例えば、この記事で紹介したみたいなタブパネルとか
(K)jQueryでタブパネルを1ページに複数設置する場合の方法
<ul class="tabs"> <li id="tab1" class="tab active"><a href="#cont1">タブ01</a></li> <li id="tab2" class="tab"><a href="#cont2">タブ02</a></li> <li id="tab3" class="tab"><a href="#cont3">タブ03</a></li> </ul>
そういう場合は、特定のアンカーだけアニメーションを発生させないようにすればいい。
$(function() { $('a[href^="#"]:not(a.noscroll)').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; }); });
あとは、アニメーションをかけたくないアンカーに「noscroll」のclassを書いてあげればOK。
<ul class="tabs"> <li id="tab1" class="tab active"><a href="#cont1” class=“noscroll">タブ01</a></li> <li id="tab2" class="tab"><a href="#cont2" class=“noscroll">タブ02</a></li> <li id="tab3" class="tab"><a href="#cont3" class=“noscroll">タブ03</a></li> </ul>