さっそく実装してみる
See the Pen 【jQuery】アコーディオン、エリア外からのアンカーでアコーディオンが開く、そしてアンカー場所へ移動する。 by 125naroom (@125naroom) on CodePen.
HTMLとCSSとjQueryはこちら
HTML
<section class="section">
<div class="anchor">
<ul>
<li>
<a href="#anchor1">アンカー1へ</a>
</li>
<li>
<a href="#anchor2">アンカー2へ</a>
</li>
<li>
<a href="#anchor3">アンカー3へ</a>
</li>
</ul>
</div>
<div class="more">もっとみる(アコーディオン)</div>
<div class="one-detail hide">
<div class="one-body" id="anchor1">
<p>アンカー1</p>
</div>
<div class="one-body" id="anchor2">
<p>アンカー2</p>
</div>
<div class="one-body" id="anchor3">
<p>アンカー3</p>
</div>
</div>
</section>
CSS
絶対に必要なものだけ記載しておきます。デザインはおまかせしますー。
.hide {
display: none;
}
jQuery
一行解説したいところですが、ざっくり説明すると、スルスルーとスクロール設定、待機設定、アコーディオン設定、アンカーからのアコーディオン設定、をしています。
$(function(){
//scrollTo
function scrollTo(_target, _offset){
var
_f = true,
_s = 500,
_t = 0;
if(_target && _target.length){
try{
_t = _target.offset().top;
}
catch(e){
_f = false;
}
}
if(_offset !== undefined){
_t = Math.max(0, _t + _offset);
}
if(_f){
$('body, html').animate({scrollTop: _t}, _s, 'swing');
}
}
//wait
$.wait = function(msec) {
var d = new $.Deferred;
setTimeout(function(){
d.resolve(msec);
}, msec);
return d.promise();
};
//more
$('.section').find('.more').click(function(){
var _p = $(this).closest('.section');
_p
.toggleClass('is-open')
.find('.one-detail').slideToggle(250);
if(_p.hasClass('is-open')){
$.when(function(){
return $.wait(100);
}())
.then(function(){
scrollTo(_p.find('.one-detail'), -48.8);
});
}
return false;
});
//anchor + open
$('.section').find('.anchor').find('a').unbind().click(function(){
var
_p = $(this).closest('.section'),
_target = $($(this).attr('href')),
_wait = 300;
if(_p.hasClass('is-open')){
_wait = 100;
}
_p
.addClass('is-open')
.find('.one-detail').show();
$.when(function(){
return $.wait(_wait);
}())
.then(function(){
scrollTo(_target, -0);
});
return false;
});
});
メモ
jQueryのことで何かわからないことがあればjQueryの日本語リファレンスサイトがあるので一度チェックしてみるのをおすすめします。