页面内容过长，如何定位页面滚动条
2006-03-29 08:25
351 查看
有一个页面，由于内容太长，所以出现了垂直滚动条；在页面中，有多个按钮可执行服务器端代码，如此一来，点击了某一按钮执行操作并完成操作后，页面又重新定位在顶端，如果要执行相同按钮的代码，这时候又要拖动滚动条来寻找到相应按钮才能操作，如此，给客户的印象一点都不好，有没有一种办法，能够智能的定位在页面中的位置，比如，点击哪个按钮进行操作，操作完成之后，仍然定位在那个按钮的位置，而不定位在页面顶端呢，还请大虾们赐教，小弟谢过！
---------------------------------------------------------------
首先asp.net2.0提供了简单的方法。
如果asp.net1.x，可以用@ Page SmartNavogation="true"
---------------------------------------------------------------
<%@ Page SmartNavigation="true"
--------------------------------------------------------------- http://singlepine.cnblogs.com/articles/257213.html ---------------------------------------------------------------
//cs代码
public class WebForm5 : System.Web.UI.Page
{
protected System.Web.UI.WebControls.Button Button2;
protected System.Web.UI.WebControls.TextBox pos;
#region Web Form Designer generated code
override protected void OnInit(EventArgs e)
{
InitializeComponent();
base.OnInit(e);
}
private void InitializeComponent()
{
this.Load += new System.EventHandler(this.Page_Load);
}
#endregion
private void Page_Load(object sender, System.EventArgs e)
{
}
protected string writebutton()
{
string script="";
script="<table>";
for(int m=0;m<100;m++)
{
script+="<tr><td>";
script+=m;
script+="</td></tr>";
}
script+="</table>";
return script;
}
}
//html代码-----------------------------
1.窗体自身滚动条定位控制
<HTML>
<HEAD>
<title>窗体自身滚动条定位控制</title>
<meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR">
<meta content="C#" name="CODE_LANGUAGE">
<meta content="JavaScript" name="vs_defaultClientScript">
<meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">
<SCRIPT type="text/javascript"><!--
function onscrollform()
{
document.all["pos"].value = document.body.scrollTop;
}
function formOnload()
{
OnloadForScroll();
}
function OnloadForScroll()
{
var spos = document.all["pos"].value;
window.scrollTo( 0, spos );
}
--></SCRIPT>
</HEAD>
<BODY onscroll="onscrollform();" onload="formOnload();" scroll="yes" ms_positioning="GridLayout">
<form id="Form1" method="post" runat="server">
<%=writebutton()%>
<asp:textbox id="pos" style="DISPLAY: none" Runat="server"></asp:textbox>
<asp:Button id="Button2" style="Z-INDEX: 102; LEFT: 336px; POSITION: absolute; TOP: 520px" runat="server"
Text="可以将页面缩小,把滚动条往下拉看效果"></asp:Button>
</form>
</FORM>
</BODY>
</HTML>
2.窗体自身滚动条被禁止，而通过div的滚动条来定位控制
<HTML>
<HEAD>
<title>窗体自身滚动条被禁止，而通过div的滚动条来定位控制</title>
<meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR">
<meta content="C#" name="CODE_LANGUAGE">
<meta content="JavaScript" name="vs_defaultClientScript">
<meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">
<SCRIPT type="text/javascript"><!--
function scrollDiv()
{
document.all.pos.value = document.all.onlinediv.scrollTop;//onlinediv是一个div
}
function formOnload()
{
OnloadForScroll();
}
function OnloadForScroll()
{
var spos = document.all["pos"].value;
if(! spos)spos=0;
document.all.onlinediv.scrollTop=spos;
}
--></SCRIPT>
</HEAD>
<BODY onscroll="onscrollform();" onload="formOnload();" scroll="no" ms_positioning="GridLayout">
<form id="Form1" method="post" runat="server">
<table width="300">
<tr>
<td>
<div id="onlinediv" style="OVERFLOW: auto; WIDTH: 100%; HEIGHT: 560px" onscroll="scrollDiv();">
<%=writebutton()%>
</div>
</td>
</tr>
</table>
<asp:textbox id="pos" style="DISPLAY: none" Runat="server"></asp:textbox>
<asp:Button id="Button2" style="Z-INDEX: 102; LEFT: 336px; POSITION: absolute; TOP: 520px" runat="server"
Text="可以将页面缩小,把滚动条往下拉看效果"></asp:Button>
</form>
</FORM>
</BODY>
</HTML>
------------------------------------------
单纯页面时SmartNavigation可行，但是如果页面中加载了用户控件的话，此时就不能用它了，会报错。所以可以为用text来记录滚动条的位置。
Source
---------------------------------------------------------------
首先asp.net2.0提供了简单的方法。
如果asp.net1.x，可以用@ Page SmartNavogation="true"
---------------------------------------------------------------
<%@ Page SmartNavigation="true"
--------------------------------------------------------------- http://singlepine.cnblogs.com/articles/257213.html ---------------------------------------------------------------
//cs代码
public class WebForm5 : System.Web.UI.Page
{
protected System.Web.UI.WebControls.Button Button2;
protected System.Web.UI.WebControls.TextBox pos;
#region Web Form Designer generated code
override protected void OnInit(EventArgs e)
{
InitializeComponent();
base.OnInit(e);
}
private void InitializeComponent()
{
this.Load += new System.EventHandler(this.Page_Load);
}
#endregion
private void Page_Load(object sender, System.EventArgs e)
{
}
protected string writebutton()
{
string script="";
script="<table>";
for(int m=0;m<100;m++)
{
script+="<tr><td>";
script+=m;
script+="</td></tr>";
}
script+="</table>";
return script;
}
}
//html代码-----------------------------
1.窗体自身滚动条定位控制
<HTML>
<HEAD>
<title>窗体自身滚动条定位控制</title>
<meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR">
<meta content="C#" name="CODE_LANGUAGE">
<meta content="JavaScript" name="vs_defaultClientScript">
<meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">
<SCRIPT type="text/javascript"><!--
function onscrollform()
{
document.all["pos"].value = document.body.scrollTop;
}
function formOnload()
{
OnloadForScroll();
}
function OnloadForScroll()
{
var spos = document.all["pos"].value;
window.scrollTo( 0, spos );
}
--></SCRIPT>
</HEAD>
<BODY onscroll="onscrollform();" onload="formOnload();" scroll="yes" ms_positioning="GridLayout">
<form id="Form1" method="post" runat="server">
<%=writebutton()%>
<asp:textbox id="pos" style="DISPLAY: none" Runat="server"></asp:textbox>
<asp:Button id="Button2" style="Z-INDEX: 102; LEFT: 336px; POSITION: absolute; TOP: 520px" runat="server"
Text="可以将页面缩小,把滚动条往下拉看效果"></asp:Button>
</form>
</FORM>
</BODY>
</HTML>
2.窗体自身滚动条被禁止，而通过div的滚动条来定位控制
<HTML>
<HEAD>
<title>窗体自身滚动条被禁止，而通过div的滚动条来定位控制</title>
<meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR">
<meta content="C#" name="CODE_LANGUAGE">
<meta content="JavaScript" name="vs_defaultClientScript">
<meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">
<SCRIPT type="text/javascript"><!--
function scrollDiv()
{
document.all.pos.value = document.all.onlinediv.scrollTop;//onlinediv是一个div
}
function formOnload()
{
OnloadForScroll();
}
function OnloadForScroll()
{
var spos = document.all["pos"].value;
if(! spos)spos=0;
document.all.onlinediv.scrollTop=spos;
}
--></SCRIPT>
</HEAD>
<BODY onscroll="onscrollform();" onload="formOnload();" scroll="no" ms_positioning="GridLayout">
<form id="Form1" method="post" runat="server">
<table width="300">
<tr>
<td>
<div id="onlinediv" style="OVERFLOW: auto; WIDTH: 100%; HEIGHT: 560px" onscroll="scrollDiv();">
<%=writebutton()%>
</div>
</td>
</tr>
</table>
<asp:textbox id="pos" style="DISPLAY: none" Runat="server"></asp:textbox>
<asp:Button id="Button2" style="Z-INDEX: 102; LEFT: 336px; POSITION: absolute; TOP: 520px" runat="server"
Text="可以将页面缩小,把滚动条往下拉看效果"></asp:Button>
</form>
</FORM>
</BODY>
</HTML>
------------------------------------------
单纯页面时SmartNavigation可行，但是如果页面中加载了用户控件的话，此时就不能用它了，会报错。所以可以为用text来记录滚动条的位置。
Source
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JS 侧栏导航点击定位页面内容位置及滚动条滚动改变导航元素对应状态
- 如何实现页面打开定位滚动条的效果
- JQuery实现页面随滚动条滚动而动态加载内容的效果
- 页面滚动动态加载数据，页面下拉自动加载内容 ，滚动条滚动到最底端加载数据
- 如何使用jquery获取 (滚动条)距离(页面底部)的距离
- dedecms5.7内容页面如何调用相关文章
- webbrowser页面内容填充及光标定位
- 如何用js控件div的滚动条，让它在内容更新时自动滚到底部？
- [分享]如何保证页面刷新后的滚动条位置
- jquery如何判断滚动条滚到页面底部并执行事件
- ASP.NET中如何向页面写入JavaScript脚本内容
- DataGridView如何实现自动定位效果，比如我输入个数字N就能马上定位到第N行，而且滚动条也会跟着滚动！
- HTML页面滚动条定位
- 如何在JSP页面显示mysql数据库内容 （二）
- 如何使用Web Service新建和更新Wiki页面的内容
- 编写Help帮助页面时如何定位到某一确定位置
- HTML 页面内定位跳转（用于新浪博客内部内容的快速定位）
- 没有滚动条，页面内容显示不全问题的解决方法
- web中，如何读取Word内容(包含表格，但不包含图片）并且显示在页面中或保存进数据库中
- 牛腩 40,41,42 整合新闻内容页 如何用LinkButton传数据,验证码的使用,保持滚动条不变,锚链接