我有一个包含 200 多个术语和定义的两列表。它通过触发名为“showIt”的scrollIntoView函数的选择下拉菜单滚动到 #anchors。它还使用 href 滚动到#anchors。您可以在http://poweranddata.info/knowledge-center/terminology试用它们 。您也可以在 http://jsbin.com/IBePAFo/2/edit上试用它们并查看完整代码的示例。
我现在需要的是一个后退按钮，它将滚动回滚动到的上一行。而已。不需要保存很长的历史（至少现在不需要）。此外，如果可能，不希望保存位置并滚动回它。
我认为基本的 onclick 按钮功能可能就像 1st) 复制当前行 id 一样简单，2nd) 使用先前滚动到存储在某处的行 id 激活scrollintoView功能（如下所示），然后 3) 替换存储的先前使用复制的行滚动到行 id，这使“后退”按钮准备好进行下一次单击。也许 onload 可以默认存储第一行 id，这样后退按钮总是有一些东西可以开始（或者可能没有必要）。
我已经走到了这一步，但真的很难让我的头脑围绕这个问题。从我能想到的各个角度搜索了所有论坛，包括后退按钮、历史记录、cookies、表格——你能想到的。我找不到任何足够具体的代码。几乎所有东西似乎都只适用于页面和窗口。我将非常感谢任何可以帮助我编写此代码的人。
提供以下代码以供快速参考。与上面的 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>