页面回发后,让页面自动滚动到指定位置的一种简单的方法

最近某客户做实施,顺便完善一下程序。突然找到了一个老问题的解决方法。 就是当用户按一个按钮后,希望回发后的页面滚到一个指定的位置,而不是页面的开头部分。以前看过一篇文章介绍了一种方法,当时也没有理解,也没有记录下来,现在又遇到了这个问题,还是自己想一个简单点的方法吧。 博克园里的“最新评论”里的链接,点击后打开的页面会直接滚动到指定的评论而不是帖子一开始的位置。 那么就用这种方法了,看了一下HTML代码,发现有这一类的标签

<a id="a001" href="#001" name="001"></a>

原来奥秘就在 name="001"这里,在这里作一个“标记”,然后单击这个连接的时候就会自动滚动到这里。 ok了,就是他了。那么怎么触发这个js的单击事件呢?很简单,在页面加载完毕之后执行这个js语句就可以了 document.getElementById("a001").click(); 等等,并不是每一次看这个页面都要自动滚动者这个标签上呀,怎么办呢?这也好办,再加一个标志就可以了。 我们再加一个文本框来记录这个标志。 <asp:TextBox id="Txt_A" runat="server" Width="72px"></asp:TextBox>

function myLoad()

{

    var a = document.getElementById("Txt_A").value;

    if (a != "")

    {

        document.getElementById("a001").click();

    }

}

当文本框里有值的时候,我们就触发这个事件,没有值的话就不用了。 等等好像还有一个问题,如果在同一个页面里,需要根据不同的情况,跳到不同的位置怎么办呀。这个也简单。 我们多做几个 <a>标签,标记多个位置,然后要跳到哪里就把对应的 <a>标签的ID放在文本框里面。在稍微修改一下js函数就可以了。

function myLoad()

{

    var a = document.getElementById("Txt_A").value;

    if (a != "")

    {

        document.getElementById(a).click();

    }

}

当然了,要在后置代码里面根据需求给文本框赋值。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏CDA数据分析师

50个逆天功能,看完变Excel绝顶高手(全都是动图!)

Excel的50个逆天功能,动画教程珍藏版。 1、自动筛选 ? 2、在Excel中字符替换 ? 3、在Excel中冻结行列标题 ? 4、在Excel中为导入外部...

2846
来自专栏娱乐心理测试

微信小程序自定义组件(Toast)

微信官方的wx.showToast这个API用起来限制性太强,在正式项目上根本用不上,但是又没有其他组件或API可以替代,所以就自己通过网上大神的方法自己写了一...

2093
来自专栏Android小菜鸡

自定义组件——ModuleView

  ModuleView是一个模快化的View。可以快速搭建一个常用的模块页面,显示不同模块的数据内容。它的难点在于解决ScrollView与RecyclerV...

1011
来自专栏天天

微信小程序中自定义组件solt的使用

我们会发现,在自定义模板中有一对<code><slot></slot></code>,这里是干什么用的呢?在组件模板中可以提供一个 <slot> 节点,用于承载...

2.1K2
来自专栏埋名

svgtofont.js 自动生成图标字体和彩色图标文件

一般情况我通过 iconfont 或者 icomoon 来实现图标管理生成字体,导入到项目中使用。

7294
来自专栏守望轩

Visual Studio 2008 每日提示(三)

#021、 调整字符、词或行的顺序 原文地址:http://blogs.msdn.com/saraford/archive/2007/08/23/did-yo...

2743
来自专栏pangguoming

Excel 2013中单元格添加下拉列表的方法

使用Excel录入数据的时候我们通常使用下拉列表来限定输入的数据,这样录入数据就很少发生错误了。Excel 2013较以前的版本发生了很大的变化,那么在Exce...

3308
来自专栏张戈的专栏

为iFrame添加动态载入效果,提高用户体验

中国博客联盟-成员展示导航一直都是直勾勾的加载,并且未加载完成之前还会强行占据一大片空白区域,体验很不友好!昨天在制作展示导航 WordPress 插件时,把这...

3044
来自专栏Python

linux每日命令(11):cat命令

cat命令的用途是连接文件或标准输入并打印。这个命令常用来显示文件内容,或者将几个文件连接起来显示,或者从标准输入读取内容并显示,它常与重定向符号配合使用。

933
来自专栏Android小菜鸡

解决H5在IOS的WebView下上拉下拉会带动整个WebView出现空白

做Web应用,碰到问题,当拖动页面的时候,IOS的整个WebView会被拖动,导致上下方有灰色空白出现,并且影响内部滑动的体验。 在网上找了个神秘代码,大概意...

1K4

扫码关注云+社区

领取腾讯云代金券