定番
履歴

JS URLのハッシュ値をUIに活用する

JS URLのハッシュ値をUIに活用する
URLの最後に#をつけて文字列をつけるとページ内のIDのまでページ内で移動します。その用途を利用してスクロールとアコーディオンを組み合わせたUIのサンプルです。

ページ内からのリンクはaタグで書くだけ。

クリックすると、アコーディオンで隠れているコンテンツのところまで、スクロールし、コンテンツを表示します。

直接#をつけてリンクされても正常に動きます。

上下にはわかりやすいよう、青と赤の要素を配置しています。

demo1 demo2 demo3
blue
blue
blue
content1
content2
content3
red
red
red

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

<div id="demo_space">

<a href="#demo1">demo1</a>
<a href="#demo2">demo2</a>
<a href="#demo3">demo3</a>

<div class="blue">blue</div>
<div class="blue">blue</div>
<div class="blue">blue</div>

<div id="demo1"><a href="#demo1">demo1</a></div>
<div id="demo1_body" class="demo_content">content1</div>

<div id="demo2"><a href="#demo2">demo2</a></div>
<div id="demo2_body" class="demo_content">content2</div>

<div id="demo3"><a href="#demo3">demo3</a></div>
<div id="demo3_body" class="demo_content">content3</div>

<div class="red">red</div>
<div class="red">red</div>
<div class="red">red</div>

</div>

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;
}
2018-06-20 12:38:31
このページの二次元コード

関連するサンプル

人気記事ランキング

© 2018 kipure
Top