`
izuoyan
  • 浏览: 9471835 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

页面元素的定位scrollintoview

阅读更多

在.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;绑定;

分享到:
评论

相关推荐

    前端项目-jquery-scrollintoview.zip

    jQuery ScrollIntoView插件应运而生,它提供了一个方便的方法来实现这一功能,使得开发者能够轻松控制页面元素的滚动展示。 首先,我们来了解一下jQuery。jQuery是一款广泛应用于Web开发的JavaScript库,它的出现极...

    提交页面的定位–scrollIntoView的用法

    `scrollIntoView`是Web开发中...总结来说,`scrollIntoView`是一个强大的工具,可以帮助开发者提高用户体验,特别是在处理页面滚动和定位元素时。正确理解和使用这个方法,可以为你的Web应用增添更多人性化的交互体验。

    html中设置锚点定位的几种常见方法.doc

    上述代码中,“document.getElementById('目标元素的id')”获取目标元素,而“scrollIntoView()”方法则确保目标元素滚动到视图中。这种方法可以在复杂的单页面应用中使用,尤其在需要动态地从JavaScript更新页面...

    表单定位查询

    "表单定位查询"这个主题涉及到网页设计、前端开发以及用户交互等方面的知识,主要关注如何通过输入框实现对表格数据的高效检索和定位。 首先,我们来看“表单”(form)。表单是HTML中的一个重要元素,用于收集用户...

    js实现目录定位正文

    在网页开发中,目录定位正文是一项常见的需求,尤其在长篇文档或文章中,它能够帮助用户快速跳转到特定的章节。本示例通过JavaScript实现了这一功能,无需手动设置每一层的高度,而是通过自动识别层的高度来实现精确...

    页面内锚点定位及跳转方法总结(推荐)

    页面内锚点定位和跳转是网页设计中常见的交互元素,它允许用户通过点击链接快速定位到页面内的特定位置。本文将对几种不同的锚点定位和跳转方法进行详细总结,帮助开发者更好地理解和应用这些技术。 首先,最基础的...

    【JavaScript源代码】vue实现锚点定位功能.docx

    在 Vue 中实现锚点定位功能,可以增强用户体验,使得用户可以通过点击导航栏中的链接直接跳转到页面的特定位置。以下是使用 Vue.js 实现锚点定位的详细步骤和相关知识点: 1. **锚点的基本概念**: 锚点(Anchor)...

    vue项目中锚点定位替代方式

    在这个方法里,首先通过document.getElementById()获取目标元素,然后调用该元素的scrollIntoView()方法,使得该元素滚动到页面的可视区域。之后,只需要在对应的HTML标签上绑定click事件,当点击事件触发时,调用...

    详解Vue项目中实现锚点定位

    通过在组件的methods对象中定义一个方法(如goAnchor),可以在点击事件触发时,调用`this.$el.querySelector(selector).scrollIntoView()`,其中selector是目标元素的ID选择器,将目标元素滚动到页面顶部。...

    Vue监听滚动实现锚点定位(双向)示例

    在项目需求中需要实现一个滚轴联动锚点的功能 效果图如下: 功能代码demo如下: (item, key=index xss=removed xss=removed&gt; &lt;div style=width:100%;height:100%;font-size:30

    JS控制div跳转到指定的位置的几种解决方案总结

    scrollIntoView方法是一个较新的方法,它是DOM元素的属性之一,可以让浏览器滚动页面至该元素在视口内可见。 示例代码如下: ```javascript [].slice.call(document.querySelectorAll('a')).forEach(function(el){ ...

    修改后的 jquery模拟字母顺序排序定位城市列表方法

    以上代码中,`scrollIntoView`方法用于将匹配的城市元素滚动到视口中央。`behavior: 'smooth'`使滚动动画平滑。 最后,我们需要注意的是,原代码中提到了修复部分BUG。这可能涉及性能优化,如避免不必要的DOM操作,...

    selenium+JS页面滚动.docx

    Selenium 的主要功能包括浏览器控制、元素定位、事件模拟等。 二、JavaScript 简介 JavaScript 是一种流行的脚本语言,广泛应用于 Web 开发中。JavaScript 可以用于动态改变网页内容、实现交互效果、处理用户输入...

    【JavaScript源代码】JavaScript 获取滚动条位置并将页面滑动到锚点.docx

    锚点问题主要涉及如何使页面中的某个元素成为焦点或直接跳转至该元素的位置。在PC端,最常见的应用场景之一是网页右侧的“返回顶部”按钮;而在移动端,则常见于通讯录、银行APP中快速定位到指定位置等功能。 #### ...

    js效果全集(这辈子就没见过这么全的了)

    元素定位** - `obj.scrollIntoView(true)`: 将元素滚动至可视区域内。 **11. 锚点使用** - `&lt;a name="first"&gt;`: 定义锚点。 - `&lt;a href="#first"&gt;anchors&lt;/a&gt;`: 跳转到锚点。 **12. 查询字符串** - `location...

    这是关于常用的JavaScript的使用技巧

    `&lt;a href="mailto:aaa@bbb.com?subject=ccc&body=xxxyyy"&gt;` 创建邮件链接,`scrollIntoView(true)` 让元素滚动到视口可见。 8. 文本编辑:`contenteditable` 属性允许用户编辑元素内容,`execCommand` 方法执行特定...

    超级实用且不花哨的js代码大全

    32. 快速滚动:`obj.scrollIntoView(true)` 让指定元素滚动到视口可见位置。 33. 锚点定位:`&lt;a name="first"&gt;` 和 `&lt;a href="#first"&gt;` 创建和链接到页面内的锚点。 34. URL参数:`location.search();` 获取URL的...

    前端大厂最新面试题-HTML面试题.docx

    + 对具有复杂动画的元素使用绝对定位,使它脱离文档流,否则会引起父元素及后续元素频繁回流。 回流和重绘都是浏览器的必要操作,但它们会对性能产生影响。因此,我们需要尽量减少回流和重绘的次数,使用上述优化...

    Javascript技巧很全.doc

    17. **滚动定位**:`obj.scrollIntoView(true)`使元素滚动到视口可见。 18. **网页参数传递**:通过URL的查询字符串`location.search()`可以获取页面传递的参数。 19. **可编辑内容**:`contenteditable`属性使...

Global site tag (gtag.js) - Google Analytics