スクロールボックスのアンカーリンク
ライブラリを使わないページ内ジャンプのメモ
[JavaScript] DIVのスクロールをJavaScriptから操作する - YoheiM技術やらずに終われまテン
height: 30vh;
min-height: 315px;
overflow: auto;
[JavaScript] DIVのスクロールをJavaScriptから操作する - YoheiM技術やらずに終われまテン
height: 30vh;
min-height: 315px;
overflow: auto;
<div class="modal-body">
<div class="modal-body-inner" id="area-b">
<div id="b-index">
目次
<a onclick="test('area-b','b-index',this,'b1');" href="javascript:void(0);" rel="nofollow">環境設定の構造と構成</a>
<a onclick="test('area-b','b-index',this,'b2');" href="javascript:void(0);" rel="nofollow">環境設定関数について</a>
環境設定引数 三つの大分類について
環境設定引数 二種の中分類について
環境設定引数 設定項目について
</div>
<script type="text/javascript">
<!--
function test(_area,_head,_this,_anchor){
var area = document.getElementById(_area);
var areaScrollHeight = area.scrollHeight;
var areaRect = area.getBoundingClientRect();
var headRect = document.getElementById(_head).getBoundingClientRect();
var listRect = _this.getBoundingClientRect();
var anchorRect = document.getElementById(_anchor).getBoundingClientRect();
console.log(areaRect.top+' / '+headRect.top+' / '+listRect.top+' / '+anchorRect.top);
area.scrollTop = anchorRect.top - headRect.top - 16;
}
-->
</script>
<div id="b1"></div>
環境設定の構造と構成
<pre style="white-space: pre-wrap;"><span class="Violet">環境設定関数</span> ({
<span class="Violet">大分類</span> {
<span class="Violet">設定項目</span>: <span class="Yellow">値</span>
<span class="Violet">中分類</span> { <span class="Violet">設定項目</span>: <span class="Yellow">値</span> }
<span class="Violet">中分類</span> { <span class="Violet">設定項目</span>: <span class="Yellow">値</span> }
}
<span class="Violet">大分類</span> {
<span class="Violet">設定項目</span>: <span class="Yellow">値</span>
}
<span class="Violet">大分類</span> {
<span class="Violet">設定項目</span>: <span class="Yellow">値</span>
<span class="Violet">中分類</span> { <span class="Violet">設定項目</span>: <span class="Yellow">値</span> }
}
})</pre>
<div id="b2"></div>
環境設定関数について
<pre style="white-space: pre-wrap;">bloggerRpg.<span class="Violet">config</span>(階層構造の引数)
環境設定関数は投稿本文に入力し、Blogger RPG を呼び出します。
関連記事の構成とフィードリクエスト、コールバックが関連記事の出力を行います。
環境設定は階層構造の引数として設定します。</pre>
環境設定引数 三つの大分類について
<pre style="white-space: pre-wrap;"><span class="Violet">related_posts</span> <span class="Yellow">/* 必須 */</span> <span class="Yellow">/*!!*/</span> <span class="Yellow">/*!*/</span>
関連記事とページ送りの出力を司ります。<span class="Yellow">必須項目</span>と<span class="Yellow">奨励項目</span>が含まれています。
<span class="Violet">fields_filter</span> <span class="Yellow">/* 必須 */</span> <span class="Yellow">/*!!*/</span>
関連記事を絞り込む検索条件を設定します。<span class="Yellow">必須項目</span>です。
<span class="Violet">feeds_condition</span>
関連記事のデータをリクエストするURLアドレスを設定します。</pre>
環境設定引数 二種の中分類について
<pre style="white-space: pre-wrap;"><span class="Violet">special_setting</span>
基本設定を調整する項目。
<span class="Violet">custom_setting</span>
基本設定を変更します。</pre>
環境設定引数 設定項目について
<pre style="white-space: pre-wrap;"><span class="Violet">項目名</span>: <span class="Yellow">/* 必須 */</span> <span class="Yellow">/*!!*/</span>
必須として設定する項目。
<span class="Violet">項目名</span>: <span class="Yellow">/* 奨励 */</span> <span class="Yellow">/*!*/</span>
設定が奨励される項目。
<span class="Violet">項目名</span>: <span class="Yellow">選択</span>
必要に応じて選択する項目。</pre>
</div><!--inner-->
</div>
