200 を超える用語と定義を含む 2 列のテーブルがあります。「showIt」と呼ばれるscrollIntoView関数をトリガーする選択ドロップダウンによって #anchors にスクロールします。また、hrefs を使用して #anchors までスクロールします。http://poweranddata.info/knowledge-center/terminologyで試すことができます 。それらを試して、 http://jsbin.com/IBePAFo/2/editで完全なコードのサンプルを確認することもできます。
今必要なのは、スクロールした前の行に戻る戻るボタンです。それでおしまい。長い履歴を保存する必要はありません (少なくとも今のところは)。また、可能であれば、位置を保存してスクロールバックしないことをお勧めします。
基本的な onclick ボタン機能は、1 つ目) 現在の行 ID をコピーする、2 つ目)どこかに保存されている以前にスクロールされた行 ID を使用してscrollintoView関数 (以下に示す) をアクティブにする、3) 保存されている以前の行 ID を置き換えるという単純なものであると思います。コピーされた行 ID にスクロールされ、[戻る] ボタンが次のクリックの準備が整います。おそらく、onload はデフォルトで最初の行 ID を保存して、[戻る] ボタンが常に何かを開始できるようにすることができます (または必要ではないかもしれません)。
ここまでたどり着きましたが、頭を悩ませるのに本当に苦労しました。戻るボタン、履歴、Cookie、テーブルなど、あらゆる角度からすべてのフォーラムを検索しました。これに十分な具体的なコードが見つかりませんでした。ほぼすべてがページとウィンドウにのみ適用されるようです。このコードで私を助けてくれる人にはとても感謝しています。
以下のコードは、クイック リファレンス用に提供されています。上記の jsbin と同じ:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<style>
body {
font: 20px Calibri, Serif;
display: block;
width:500px;
margin:0 0 0 0;}
table {
display: block; /* makes it sizeable */
width: 500px;
height: 100px; /*height of scrollable area */
overflow: auto; /* scroll rather than overflow */
overflow-x:true; /* Bottom Scroll Bar */
border-collapse: collapse;
margin:0 0 0 0;
border:1px solid #ccc;}
tr:nth-of-type(odd) { background: #eee; } /* Zebra striping */
th {
background: #333; /*Not used - No headers*/
color: white; /*Not used - No headers*/
font-weight: bold; /*Not used - No headers*/
}
td, th {
border: 1px solid #ccc;
text-align: left;
}
td {vertical-align:text-top; padding:6px 10px 6px 10px; }
table.fixed table {width:500px;} /*setup for col widths */
table.fixed td:nth-of-type(1) {width:200px;} /*sets col width */
table.fixed td:nth-of-type(2) {width:300px;} /*sets col width */
</style>
<!--FUNCTIONfor: SCROLL-INTO-VIEW (used for select dropdown and top & bottom buttons)-->
<script type="text/javascript">
function showIt(elID) {
var el = document.getElementById(elID);
el.scrollIntoView(true);}
</script>
<!--FUNCTIONfor: RESETING SELECT DROPDOWN-->
<script type="text/javascript">
function resetScrollTo() {
for (var i = 0; i < elements.length; i++)
{
elements[i].selectedIndex = 0;
}
}
</script>
<!--FUNCTIONfor: BACK BUTTON ???????????????-->
</head>
<body>
<div style="margin:0 0 10px 0;"> <!--Dropdown/button CONTAINER-->
<!--BOX: SCROLL-TO ("showIt")-->
<select class="box-select_scrollto" id="box-select_scrollto" onchange="showIt(this.options[this.selectedIndex].value)">
<option value="scroll-to" selected>SCROLL-TO</option>
<option value="absorber">absorber</option>
<option value="accessible">accessible</option>
<option value="adjustable">adjustable</option>
<option value="ampacity">ampacity</option>
<option value="ampere">ampere</option>
<option value="appliance">appliance</option>
<option value="approved">approved</option>
<option value="askarel">askarel</option>
<option value="automatic">automatic</option>
<option value="coulomb">coulomb</option>
<option value="current">current</option>
<option value="cutout">cutout</option>
<option value="cutout box">cutout box</option>
<option value="data">data</option>
<option value="data server">data server</option>
<option value="data storage">data storage</option>
<option value="dead front">dead front</option>
</select>
<button class="buttonTop" type="button" onclick="resetScrollTo()">Reset</button>
<button class="buttonTop" type="button" onclick="showIt('top'); resetScrollTo();">Top</button>
<button class="buttonBottom" type="button" onclick="showIt('bottom')">Bottom</button>
<button class="buttonBottom" type="button" onclick="back()">Back</button>
</div>
<table class="fixed" class="sortable" id="termtable" name="termtable">
<tr><td id="top">Top row</td><td>Top row</td></tr>
<tr><td id="absorber">absorber</td><td>Definition includes <a style="color: #04b404;" href="#cutout">cutout</a></td></tr>
<tr><td id="accessible">Definition</td><td>Definition includes <a style="color: #04b404;" href="#dead front">dead front</a></td></tr>
<tr><td id="adjustable">adjustable</td><td>Definition</td></tr>
<tr><td id="ampacity">ampacity</td><td>Definition</td></tr>
<tr><td id="ampere">ampere</td><td>Definition</td></tr>
<tr><td id="appliance">appliance</td><td>Definition</td></tr>
<tr><td id="approved">approved</td><td>Definition</td></tr>
<tr><td id="askarel">askarel</td><td>Definition</td></tr>
<tr><td id="automatic">automatic</td><td>Definition</td></tr>
<tr><td id="coulomb">coulomb</td><td>Definition</td></tr>
<tr><td id="current">current</td><td>Definition</td></tr>
<tr><td id="cutout">cutout</td><td>Definition includes <a style="color: #04b404;" href="#absorber">absorber</a></td></tr>
<tr><td id="cutout box">cutout box</td><td>Definition</td></tr>
<tr><td id="data">data</td><td>Definition</td></tr>
<tr><td id="data server">data server</td><td>Definition</td></tr>
<tr><td id="data storage">data storage</td><td>Definition</td></tr>
<tr><td id="dead front">dead front</td><td>Definition includes <a style="color: #04b404;" href="#accessible">accessible</a></td></tr>
<tr><td id="bottom">Bottom row</td><td>Bottom row</td></tr>
</table>
</body>
</html>