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名をいれる。
.pagetop{
display:block;
visibility:inherit;
opacity:1;
}
ページトップボタンを #header など、id名をいれる。
PR