Question

我有一个包含200多个术语和定义的两列表。它通过选择下拉列表滚动到#anchors，该下拉列表触发名为＆＃34; showIt＆＃34;的 scrollIntoView 函数。它还使用hrefs滚动到#anchors。您可以在http://poweranddata.info/knowledge-center/terminology处尝试。您也可以尝试使用它们，并在http://jsbin.com/IBePAFo/2/edit查看完整代码的示例。

我现在需要的是一个后退按钮，它将滚动回滚动到的上一行。就是这样。不需要保存悠久的历史（至少目前不是这样）。此外，如果可能的话，宁愿不保存位置并回滚到它。

我认为基本的onclick按钮功能可能就像第1次一样简单）复制当前行id，第2次激活 scrollintoView 函数（如下所示）使用之前存储的滚动到行ID在某处，然后3）用复制的一个替换存储的先前滚动到行id，这使得Back按钮为下一次点击做好准备。也许onload可以默认存储第一行id，这样Back按钮总是有一些东西可以开始（或者可能没有必要）。

我已经走到了这一步，但是真的很难让我的头脑在这周围敲打。从我能想到的各个角度搜索了所有论坛，包括后退按钮，历史记录，饼干，表格 - 您的名字。我无法找到足够的代码。几乎所有东西似乎只适用于页面和窗口。我非常感谢任何可以帮助我使用此代码的人。

以下代码提供快速参考。与上面的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>

Answer 1

我删除了你的jquery并用其他JS替换它。此代码基本上不需要重置按钮，因此可以将其删除。

为了让“后退”按钮起作用，你实际上必须“转到”另一个页面......一个全新的URL。这个脚本可以做到这一点，并允许您逐步向后移动...转到顶部...或底部。

试试这个......

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<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> 
<script type="text/JavaScript">
<!--//
function MM_goToURL() { //v3.0
var i, args=MM_goToURL.arguments; document.MM_returnValue = false;
for (i=0; i<(args.length-1); i+=2) eval(args[i]+".location='"+args[i+1]+"'");
}

function MM_jumpMenu(targ,selObj,restore){ //v3.0
eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
if (restore) selObj.selectedIndex=0;
}
//-->
</script>
</head>
<body>
<div style="margin:0 0 10px 0;">
<select class="box-select_scrollto" id="box-select_scrollto" onchange="MM_jumpMenu('parent',this,1)"> 
  <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="MM_goToURL('parent','#top');return document.MM_returnValue;">Top</button>
<button class="buttonBottom" type="button" onclick="MM_goToURL('parent','#bottom');return document.MM_returnValue;">Bottom</button>
<script>
<!--//
var nAgt = navigator.userAgent;
var browserName  = navigator.appName;
var nameOffset,verOffset,ix;

if ((verOffset=nAgt.indexOf("Firefox"))!=-1) {
browserName = "Firefox";
} 
else if ((verOffset=nAgt.indexOf("Firefox"))!=1) {
browserName = "Other";
}

if (browserName == 'Firefox'){
document.write(''
+'<button class="buttonBottom" type="button" onclick="history.back();location.reload(forceGet=true);">FF-Back</button>')
}

if (browserName != 'Firefox'){
document.write(''
+'<button class="buttonBottom" type="button" onclick="history.back();">Back</button>')
}
//-->
</script>
</div>  

<table class="fixed sortable" id="termtable" name="termtable">
<tr><td class="topBotRow1" id="top"><a name="top" id="top"></a>Electrical Term</td> <!--"top" FOR TOP BUTTON-->
<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>

这里可以看到工作示例...... http://siteprevue.net/stackoverflow/scrollto.htm

<强>变化：

1）将<a name="top" id="top"></a>添加到表格的第一行。这会在页面上创建一个命名锚点，而不依赖于浏览器解释。

2）用javascript替换“后退”按钮代码。此脚本首先确定浏览器是否为Firefox。接下来，如果它是Firefox，则为该按钮编写一组代码，为所有其他浏览器编写另一组代码。

此代码已在Chrome 29.0.1547.66 m，Firefox 23.0.1，IE 8.0.6001.18702和Safari 5.0.5（7533.21.1）中测试过。

下行...为了让Firefox“返回”页面必须重新加载以前的URL。这是因为您的表被包装在DIV中。

请注意，在Firefox中加载上述示例页面时，后退按钮显示为“FF-Back”。这是出于测试目的，以确保在上述浏览器中加载了正确的按钮。

...如果适合您，请不要忘记接受此作为您的答案。：）

滚动表的后退按钮（不是页面/窗口）

1 个答案: