2015-11-23

スムーススクロールとタブパネルのバッティング対策Topics

気を付けないと、スムーススクロールとタブパネルのバッティングが生じます。

スムーススクロールはこれを使います。

$('a[href^="#"]').click(function () {
var speed = 800;
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;
});
});

JavaScript

タブパネルはこれ。

【HTML】

<ul class="tab">
<li><a href="#tab1">tab1</a></li>
<li><a href="#tab2">tab2</a></li>
</ul>
<div class="content">
<div class="area" id="tab1">
Tab1
</div>
<div class="area" id="tab2">
Tab2
</div>
</div>

PHP

【JS】

$(document).ready(function() {
$('.area:first').show();
$('.tab li:first').addClass('active');

var $tbl = $('.tab li');

$tbl.click(function() {
$tbl.removeClass('active');
$(this).addClass('active');
$('.area').hide();

var $ath = $(this).find('a').attr('href');

$($ath).fadeIn();
return false;
});
});

JavaScript

ここで問題発生！

JSの設置は間違いないのに、クリックしても変わらない？！

原因は

「a href=”#”」のせい！！
a.scrollのみ、スムーススクロールするようにしよう！

これからスムーススクロールは、こう使うべき！

$('a[href^="#"].scroll').click(function () {
var speed = 800;
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;
});
});

JavaScript

ムッコ