怎样将页面在打开后将滑动条自动滚动到指定的地方解决办法
日期：2014-05-16 浏览次数：20393 次
怎样将页面在打开后将滑动条自动滚动到指定的地方
请教一下：
有两个 <div> 标签，像这样的形式：
<div>
这个div标签中还嵌入了另外一个div标签，这个div的滚动条被关闭了。
<div>
嵌入的div标签，这个div的滚动条可以使用
</div>
</div>
我想实现的是在嵌入的div标签中一个地方(比如是一个td)，设定一个锚点anc1，然后在页面打开后嵌入的div的滚动条能够到anc1这个锚点这。
------解决方案--------------------
似乎锚点是针对页面的，如果你内部嵌套的div是个iframe，通过改变iframe的src似乎可以做到这一点，但是，既然你选择了div，应该有你的理由的，如果是在div内部，锚点好像并不能起作用，要想滚动div内部的东西，需要借助div.scrollLeft和div.scrollTop这两个值，用代码来给他们赋值，就可以实现div内的内容滚动的效果，当然，这就要求代码能够比较准确的计算出原来你试图加锚点的td相对于你的div的位置参数，尽管计算可能比较麻烦，但总能得到的，给个例子做为这种思想的示例，同时关注其它好方法。
a.html
-------------------------------------------------
<html>
<script language=javascript>
function init()
{
makeScroll(9*20);
}
function makeScroll(top)
{
document.all.innerDiv.scrollTop = top;
}
function goToLine()
{
makeScroll((parseInt(document.all.line.value)-1)*20);
}
</script>
<body onload=init()>
<div id=outerDiv style=width:500;height:500;background-color:#cccccc;overflow:hidden>
定位到第 <input id=line value=10> 行 <input type=button value=go onclick=goToLine()>
<div id=innerDiv style=width:300;height:200;background-color:white;overflow:auto>
<table border=1 width=100% style=font-size:12px cellspacing=0 cellpadding=0>
<tr height=20> <td width=20> 1 </td> <td> 这里是文字信息 </td> </tr>
<tr height=20> <td width=20> 2 </td> <td> 这里是文字信息 </td> </tr>
<tr height=20> <td width=20> 3 </td> <td> 这里是文字信息 </td> </tr>
<tr height=20> <td width=20> 4 </td> <td> 这里是文字信息 </td> </tr>
<tr height=20> <td width=20> 5 </td> <td> 这里是文字信息 </td> </tr>
<tr height=20> <td width=20> 6 </td> <td> 这里是文字信息 </td> </tr>
<tr height=20> <td width=20> 7 </td> <td> 这里是文字信息 </td> </tr>
<tr height=20> <td width=20> 8 </td> <td> 这里是文字信息 </td> </tr>
<tr height=20> <td width=20> 9 </td> <td> 这里是文字信息 </td> </tr>
<tr height=20> <td width=20> 10 </td> <td> 这里是文字信息 </td> </tr>
<tr height=20> <td width=20> 11 </td> <td> 这里是文字信息 </td> </tr>
<tr height=20> <td width=20> 12 </td> <td> 这里是文字信息 </td> </tr>
<tr height=20> <td width=20> 13 </td> <td> 这里是文字信息 </td> </tr>
<tr height=20> <td width=20> 14 </td> <td> 这里是文字信息 </td> </tr>
<tr height=20> <td width=20> 15 </td> <td> 这里是文字信息 </td> </tr>
<tr height=20> <td width=20> 16 </td> <td> 这里是文字信息 </td> </tr>
<tr height=20> <td width=20> 17 </td> <td> 这里是文字信息 </td> </tr>
<tr height=20> <td width=20> 18 </td> <td> 这里是文字信息 </td> </tr>
<tr height=20> <td width=20> 19 </td> <td> 这里是文字信息 </td> </tr>
<tr height=20> <td width=20> 20 </td> <td> 这里是文字信息 </td> </tr>
</table>
</div>
</div>
</body>
</html>
-------------------------------------------------
请教一下：
有两个 <div> 标签，像这样的形式：
<div>
这个div标签中还嵌入了另外一个div标签，这个div的滚动条被关闭了。
<div>
嵌入的div标签，这个div的滚动条可以使用
</div>
</div>
我想实现的是在嵌入的div标签中一个地方(比如是一个td)，设定一个锚点anc1，然后在页面打开后嵌入的div的滚动条能够到anc1这个锚点这。
------解决方案--------------------
似乎锚点是针对页面的，如果你内部嵌套的div是个iframe，通过改变iframe的src似乎可以做到这一点，但是，既然你选择了div，应该有你的理由的，如果是在div内部，锚点好像并不能起作用，要想滚动div内部的东西，需要借助div.scrollLeft和div.scrollTop这两个值，用代码来给他们赋值，就可以实现div内的内容滚动的效果，当然，这就要求代码能够比较准确的计算出原来你试图加锚点的td相对于你的div的位置参数，尽管计算可能比较麻烦，但总能得到的，给个例子做为这种思想的示例，同时关注其它好方法。
a.html
-------------------------------------------------
<html>
<script language=javascript>
function init()
{
makeScroll(9*20);
}
function makeScroll(top)
{
document.all.innerDiv.scrollTop = top;
}
function goToLine()
{
makeScroll((parseInt(document.all.line.value)-1)*20);
}
</script>
<body onload=init()>
<div id=outerDiv style=width:500;height:500;background-color:#cccccc;overflow:hidden>
定位到第 <input id=line value=10> 行 <input type=button value=go onclick=goToLine()>
<div id=innerDiv style=width:300;height:200;background-color:white;overflow:auto>
<table border=1 width=100% style=font-size:12px cellspacing=0 cellpadding=0>
<tr height=20> <td width=20> 1 </td> <td> 这里是文字信息 </td> </tr>
<tr height=20> <td width=20> 2 </td> <td> 这里是文字信息 </td> </tr>
<tr height=20> <td width=20> 3 </td> <td> 这里是文字信息 </td> </tr>
<tr height=20> <td width=20> 4 </td> <td> 这里是文字信息 </td> </tr>
<tr height=20> <td width=20> 5 </td> <td> 这里是文字信息 </td> </tr>
<tr height=20> <td width=20> 6 </td> <td> 这里是文字信息 </td> </tr>
<tr height=20> <td width=20> 7 </td> <td> 这里是文字信息 </td> </tr>
<tr height=20> <td width=20> 8 </td> <td> 这里是文字信息 </td> </tr>
<tr height=20> <td width=20> 9 </td> <td> 这里是文字信息 </td> </tr>
<tr height=20> <td width=20> 10 </td> <td> 这里是文字信息 </td> </tr>
<tr height=20> <td width=20> 11 </td> <td> 这里是文字信息 </td> </tr>
<tr height=20> <td width=20> 12 </td> <td> 这里是文字信息 </td> </tr>
<tr height=20> <td width=20> 13 </td> <td> 这里是文字信息 </td> </tr>
<tr height=20> <td width=20> 14 </td> <td> 这里是文字信息 </td> </tr>
<tr height=20> <td width=20> 15 </td> <td> 这里是文字信息 </td> </tr>
<tr height=20> <td width=20> 16 </td> <td> 这里是文字信息 </td> </tr>
<tr height=20> <td width=20> 17 </td> <td> 这里是文字信息 </td> </tr>
<tr height=20> <td width=20> 18 </td> <td> 这里是文字信息 </td> </tr>
<tr height=20> <td width=20> 19 </td> <td> 这里是文字信息 </td> </tr>
<tr height=20> <td width=20> 20 </td> <td> 这里是文字信息 </td> </tr>
</table>
</div>
</div>
</body>
</html>
-------------------------------------------------
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
