ページ内からのリンクはaタグで書くだけ。
クリックすると、アコーディオンで隠れているコンテンツのところまで、スクロールし、コンテンツを表示します。
直接＃をつけてリンクされても正常に動きます。
見せたいコンテンツ３つを黄色の背景とし、上下に青と赤の余白を配置しています。
JavaScript
$(function(){
var myhash = location.hash;
var top_margin = -200;
if(myhash){
$('html, body').animate({
scrollTop: $(myhash).length ? $(myhash).offset().top+top_margin : 0
}, 1000);
contentView(myhash);
}
$('a').click(function() {
var demo_id = $(this).attr('href');
$('.demo_content').hide();
$('html, body').animate({
scrollTop: $(demo_id).length ? $(demo_id).offset().top+top_margin : 0
}, 1000,function(){contentView(demo_id);});
return false;
});
function contentView(myhash){
$('.demo_content').hide();
$(myhash+'_body').slideDown();
}
});HTML
$(function(){
var myhash = location.hash;
var top_margin = -200;
if(myhash){
$('html, body').animate({
scrollTop: $(myhash).length ? $(myhash).offset().top+top_margin : 0
}, 1000);
contentView(myhash);
}
$('a').click(function() {
var demo_id = $(this).attr('href');
$('.demo_content').hide();
$('html, body').animate({
scrollTop: $(demo_id).length ? $(demo_id).offset().top+top_margin : 0
}, 1000,function(){contentView(demo_id);});
return false;
});
function contentView(myhash){
$('.demo_content').hide();
$(myhash+'_body').slideDown();
}
});CSS
.blue{
background-color: blue;
height:400px;
color: #FFF;
}
.red{
background-color: red;
height:400px;
color: #FFF;
}
.demo_content{
display: none;
height:200px;
background-color: yellow;
}
#demo_space a{
border:solid 1px #999;
padding: 2px;
margin: 3px;
display: inline-block;
}
#demo_space a:hover{
background-color: #EEE;
}
