はじめに
使用パターンは２パターンあります。
①URLを直接指定したときに、必ずトップエリアに遷移するタイプ
②URLを直接指定したときに、該当エリアに遷移するタイプ
それぞれ実装方法を説明します。
使用パターンは２パターンあります。
①URLを直接指定したときに、必ずトップエリアに遷移するタイプ
②URLを直接指定したときに、該当エリアに遷移するタイプ
それぞれ実装方法を説明します。
基本実装
- index.htmlファイルを作成
- index.htmlの中にページセクションを記載する。
- 各ページセクションには、2つの属性を設定する。
- data-screen-id <エリアID（数字２桁）>
- data-screen-name <ページタイトル>
ページHTML構造
<section data-screen-id="01" data-screen-name="ページタイトル１">
ページ１の内容を記載
</section>
<section data-screen-id="02" data-screen-name="ページタイトル２">
ページ2の内容を記載
</section>
<section data-screen-id="03" data-screen-name="ページタイトル３">
ページ3の内容を記載
</section>必ずトップエリアに遷移する実装
<head>内に下記スクリプトを記載
/* /path/ は環境にあわせて適宜修正*/
<script src="/path/dynamic-contents-address.js"></script>
<script>
/*jsのクラスオブジェクトを作成*/
var changeHistory=new dynamicContentsAddress(true);
/*jsのクラスオブジェクトを初期化*/
changeHistory.init();
/*スクロールを監視を開始*/
changeHistory.start();
</script>該当エリアに遷移する実装
<head>内に下記スクリプトを記載する。
スクロールにて該当ページに移動するようにコンテンツを作成した場合、
注意点は、初回該当ページにスクロール移動を完了したあとに、スクロール監視処理を開始する。
スクロール監視処理開始は、初回のみ実施。
/* /path/ は環境にあわせて適宜修正*/
<script src="/path/dynamic-contents-address.js"></script>
<script>
/*jsのクラスオブジェクトを作成*/
var changeHistory=new dynamicContentsAddress(false);
/*jsのクラスオブジェクトを初期化*/
changeHistory.init();
/*ドキュメントに初期化完了イベントリスナーを設定*/
document.addEventListener("initialize",function(e){
/*遷移先以外はアドレスバーを変化させない有効化*/
changeHistory.moveId=e.dtail;
$('body,html').animate({scrollTop:pos-1},800, 'swing',function(){
/*初回スクロール監視を開始*/
changeHistory.start();
});
});
/*ドキュメントにページに遷移するイベントリスナーを設定*/
document.addEventListener("move",function(e){
/*遷移先以外はアドレスバーを変化させない有効化*/
changeHistory.moveId=e.dtail;
/*該当ページに遷移する処理を記載*/
/*例*/
$('body,html').animate({scrollTop:pos-1},800, 'swing',function(){
/*遷移先以外はアドレスバーを変化させないを解除*/
changeHistory.moveId=null;
});
});
</script>内部リンクの実装方法
<li><a href="02" class="innerLink">- aタグのhrefにが遷移したいページのdata-screen-idに指定した２桁の数字を指定。
- aタグのclassにinnerLinkを指定
内部リンクを有効にするには、ドキュメントにページに遷移するイベントリスナーを設定することが必須となります。 該当エリアに遷移する実装を参照
<ul>
<li><a href="02" class="innerLink">基本実装</a></li>
<li><a href="03" class="innerLink">必ずトップエリアに遷移する実装</a></li>
<li><a href="04" class="innerLink">該当エリアに遷移する実装</a></li>
<li><a href="05" class="innerLink">内部リンク</a></li>
<li><a href="06" class="innerLink">オプション説明</a></li>
</ul>