提交页面的定位--scrollIntoView的用法_实用技巧

提交页面定位问题一直骚扰我,比如我们在DataGrid外面加了来使DataGrid在一定区域内呈现,这样如果把滚动条拉到底部的时候点击修改(或者修改后点击更新,取消)页面重新加载的时候都会把滚动条拉到页面最上面部分 ,特此我将下面知识共享一下:

object.scrollIntoView( [bAlignToTop])

Parameters

bAlignToTop Optional. Boolean that specifies one of the following values:

true Default. Scrolls the object so that top of the object is visible at the top of the window.
false Scrolls the object so that the bottom of the object is visible at the bottom of the window.

Return Value

No return value.

Remarks

The scrollIntoView method is useful for immediately showing the user the result of some action without requiring the user to manually scroll through the document to find the result.

Depending on the size of the given object and the current window, this method might not be able to put the item at the very top or very bottom, but will position the object as close to the requested position as possible.

Example

This example uses the scrollIntoView method to underline the content of the document's fifth paragraph and scroll it into view at the top of the window.

HideExample

  var coll = document.all.tags("P");
if (coll.length >= 5)
{
coll(4).style.textDecoration = "underline";
coll(4).scrollIntoView(true);
}

Standards Information

There is no public standard that applies to this method.

Applies To

INPUT type=ra...
Platform Version
Win16: 4.0
Win32: 4.0
Windows CE: 4.0
Unix: 4.0
Mac: 4.0
Version data is listed when the mouse hovers over a link, or the link has focus.
A, ADDRESS, APPLET, AREA, B, BIG, BLOCKQUOTE, BR, BUTTON, CAPTION, CENTER, CITE, CODE, COL, COLGROUP, COMMENT, controlRange, CUSTOM, DD, DFN, DIR, DIV, DL, DT, EM, EMBED, FIELDSET, FONT, FORM, hn, HR, I, IFRAME, IMG, INPUT type=button, INPUT type=checkbox, INPUT type=file, INPUT type=image, INPUT type=password, INPUT type=radio, INPUT type=reset, INPUT type=submit, INPUT type=text, KBD, LABEL, LEGEND, LI, LISTING, MAP, MARQUEE, MENU, NOBR, OBJECT, OL, P, PLAINTEXT, PRE, S, SAMP, SELECT, SMALL, SPAN, STRIKE, STRONG, SUB, SUP, TABLE, TBODY, TD, TEXTAREA, TextRange, TFOOT, TH, THEAD, TR, TT, U, UL, VAR, WBR, XMP
Move the mouse pointer over an element in the Applies To list to display availability information for the listed platforms.

二、在.Net中的应用
1、定位指定控件
/// <summary>
  /// 定位txtCode控件
  /// </summary>
  private void Scroll()
  {
   string s="<script>function window.onload(){document.all('"+this.txtCode.ClientID+"').scrollIntoView();}</script>";
   Page.RegisterStartupScript("",s);
  }

2、定位指定DataGrid列
 

<div style="BORDER:0px;PADDING:0px;MARGIN:0px;OVERFLOW:scroll;WIDTH:600px;HEIGHT:200px" align="center">

现在给出一种简单的办法(其他的一些利用锚点等办法都比较复杂)

private void Scroll(int index)
        {
            string s="<script>function window.onload(){document.all('"+this.DataGrid1.ClientID+"').rows["+index+"].scrollIntoView();}</script>";
            Page.RegisterStartupScript("",s);
        }

写了一个方法,其中DataGrid1换成自己的DataGrid的ID,这个方法传递进去的参数就是行号,也就是e.Item.ItemIndex。
比如在编辑操作的时候会写this.DataGrid1.EditItemIndex=e.Item.ItemIndex;
在此语句的以前加入Scroll(e.Item.ItemIndex);就可以了
同样在更新操作的时候写为Scroll(e.Item.ItemIndex);this.DataGrid1.EditItemIndex=-1;绑定;

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索scrollintoview用法、scrollintoview、js scrollintoview、scrollintoview兼容、scrollintoview 动画,以便于您获取更多的相关知识。

时间: 2024-11-02 14:55:41

提交页面的定位--scrollIntoView的用法_实用技巧的相关文章

ASP.net中保持页面中滚动条状态的代码_实用技巧

针对这个问题我在网上找了好多,发现答案比较乱.其实Asp.net中page对象就有一个属性可以使页面提交或者更新数据后,返回页面原来位置,包括滚动条位置都可以保存. 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" MaintainScrollPositionOnPostback="true" Inh

详解ASP.NET数据绑定操作中Repeater控件的用法_实用技巧

一.绑定控件之Repeater.NET封装了多种数据绑定控件,诸如GridView.DataList等但该篇文章将会从Repeater入手,因为Repeater只提供了基本的数据绑定模板,没有内置其它分页等功能,所以它是最原始的数据绑定控件,只要能够熟练运用Repeater控件其它的绑定控件也就很简单了.1.Repeater简介Repeater 控件是基本模板化数据列表. 它不像GridView控件一样能够可视化的设计格式或样式,因此开发时在控件模板中必须显式声明所有格式.格式和样式标记.另外R

.Net页面局部更新引发的思考_实用技巧

最近在修改以前做的模块,添加一个新功能.整理了下才发现重用率很低,大部分的东西还是需要重新写.功能里用到了局部更新,所有整理一下一路来实现局部更新的解决方案及改进.  我接触的项目开发大多是以Asp.net WebForm开发的,自然会用到UpdatePanel,好处就是开发快.方便,当然产生的问题也是一大堆.然后是Ajax和一般处理程序配合实现异步请求更新.最后就是利用第三方绑定插件优化Ajax请求.  一.UpdatePanel 将需要更新的模块放入UpdatePanel的ContentTe

详解ASP.NET中Session的用法_实用技巧

      当用户在应用程序的页之间跳转时,存储在 Session 对象中的变量不会清除,而用户在应用程序中访问页面时,这些变量始终存在.当用户请求来自应用程序的 Web 页时,如果该用户还没有会话,则 Web 服务器将自动创建一个 Session 对象.当会话过期或被放弃后,服务器将终止该会话.        通过向客户程序发送唯一的 Cookie 可以管理服务器上的 Session 对象.当用户第一次请求 ASP 应用程序中的某个页面时,ASP 要检查 HTTP 头信息,查看是否有在报文中有

asp.net防止刷新时重复提交(可禁用工具条刷新按钮)_实用技巧

前段时间遇到了需要禁用刷新的需求,f5按钮就不说了,简单的js就能把它禁用,但是工具条上的刷新按钮却傻傻干不掉. 如果简单的在刷新时重新加载画面,通过window.location.href="url"可以很容易的实现,但是需求是要求在刷新时什么都不做,保留画面的状态,这下子可就复杂化了. asp.net中分辨请求是重新请求还是通过刷新按钮再次请求不是很方便,为了实现这个效果,试过了很多的方式,一下面的两种为例 1. 复制代码 代码如下: private bool pageRefres

AspNetPager控件的最基本用法_实用技巧

它弥补了GridView内置分页以及PageDatasource类辅助分页的不足,将分页数据逻辑和页面UI分离开来,非常有利于SQL分页的实现.下面仅举一个最基本的用法,帮助初学者入门. 到AspNetPage官方网站相应页面下载控件:点击打开链接 下载后解压缩,里面有一个AspNetPager.dll文件,它就是我们要使用的控件.另外还有一个spNetPager.xml文件,它是对应的文档,主要有两个作用:一是供开发人员使用控件时在代码智能提示里嵌入使用说明,二是供自动生成文档工具生成文档只用

IE和火狐中模仿Click事件及提交到新窗口总结(asp.net)_实用技巧

先看一下模拟click事件的代码: 复制代码 代码如下: <a href=http://www.jb51.net target="_blank" id="aa">ok</a> <script> var comment = document.getElementById('aa'); if (document.all) { comment.click(); } else { //火狐,如果<a>中没有定义onclick事

asp.net c#采集需要登录页面的实现原理及代码_实用技巧

首先说明:代码片段是从网络获取,然后自己修改.我想好的东西应该拿来分享. 实现原理:当我们采集页面的时候,如果被采集的网站需要登录才能采集.不管是基于Cookie还是基于Session,我们都会首先发送一个Http请求头,这个Http请求头里面就包含了网站需要的Cookie信息.当网站接收到发送过来的Http请求头时,会从Http请求头获取相关的Cookie或者Session信息,然后由程序来处理,决定你是否有权限访问当前页面. 好了,原理搞清楚了,就好办了.我们所要做的仅仅是在采集的时候(或者

ASP.NET页面传递值的方式介绍_实用技巧

一.QueryString QueryString是一种非常简单的传值方式,他可以将传送的值显示在浏览器的地址栏中.如果是传递一个或多个安全性要求不高或是结构简单的数值时,可以使用这个方法.但是对于传递数组或对象的话,就不能用这个方法了. 这种方法的优点:1.使用简单,对于安全性要求不高时传递数字或是文本值非常有效. 这种方法的缺点:1.缺乏安全性,由于它的值暴露在浏览器的URL地址中的:2.不能传递对象. 使用方法:1.在源页面的代码中用需要传递的名称和值构造URL地址:2.在源页面的代码用R