忍者ブログ
24 February

テーマXeory BaseとExtension アンカーリンクのスムーススクロールが効かない

何か下記記述でうまくいかない
スムーススクロールが無効化されてしまう
これにしたら出来た
http://taneakashi.ad-mk.com/jquery-scroll-tab-kaiketsu.html

<script>
$(function(){
   // #で始まるアンカーをクリックした場合に処理
   $('a[href^="#"]' + 'a:not(.non-scroll)').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;
   });
});
</script>         








jquery.pagetop.js 内のコードを見ると、全てのアンカーリンクでスムーススクロールが効く記述になってるみたいだけど、カスタムメニューのカスタムリンクでページ内リンク作ったけど、スムースしない。

しょうがないので、jquery.pagetop.js内の記述を消し、検索して出てくる記述を書き込むことでアンカーリンクにスムースできた。

メニュークリックでメニューパネルが開いたり、タブを使用してる人は、アンカーリンクがバッティングするので、:notで除外する

1
$('a[href^=#]').not('#除外id a.除外クラス').click(function(){


http://ruh.sunnyday.jp/archives/454



Xeoryテーマって別に使いやすくない
important使いまくりでイライラする

親テーマ内 jquery.pagetop.js の読み込みを消す。記述を消す。どれでもいい。
親か子のどっちでもいいけど、消した記述の代わりに下記スムーススクロール(バッティグ対応)を記述

<script type="text/javascript">
(function($){
 
jQuery(function() {
jQuery('a[href^="#"]:not([href$="#"])').click(function() {
var href = $(this).attr('href');
var pos = $(href).offset().top;
var duration = 200;
jQuery('body, html').animate({ scrollTop: pos }, duration, 'swing');
return false;
});
});
 
})(jQuery);
</script>


ページトップボタンが非表示のままになるのでcssを追加する
.pagetop{
    display:block;
    visibility:inherit;
    opacity:1;
}

ページトップボタンを #header など、id名をいれる。
PR