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

简介: 最近某客户做实施,顺便完善一下程序。突然找到了一个老问题的解决方法。 就是当用户按一个按钮后,希望回发后的页面滚到一个指定的位置,而不是页面的开头部分。以前看过一篇文章介绍了一种方法,当时也没有理解,也没有记录下来,现在又遇到了这个问题,还是自己想一个简单点的方法吧。

最近某客户做实施,顺便完善一下程序。突然找到了一个老问题的解决方法。

就是当用户按一个按钮后,希望回发后的页面滚到一个指定的位置,而不是页面的开头部分。以前看过一篇文章介绍了一种方法,当时也没有理解,也没有记录下来,现在又遇到了这个问题,还是自己想一个简单点的方法吧。

博克园里的“最新评论”里的链接,点击后打开的页面会直接滚动到指定的评论而不是帖子一开始的位置。

那么就用这种方法了,看了一下HTML代码,发现有这一类的标签

< 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();
    }

}


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

 

相关文章
|
前端开发
解决elementUI弹出框关闭后再打开el-select下拉框无法选中的问题
解决elementUI弹出框关闭后再打开el-select下拉框无法选中的问题
453 0
有关element UI el-table 跟el-dialog搭配使用出现的问题,背景问题,穿透问题
有关element UI el-table 跟el-dialog搭配使用出现的问题,背景问题,穿透问题
753 0
Element UI - el-table 渲染慢,卡的原因
Element UI - el-table 渲染慢,卡的原因
3815 0
|
JavaScript 前端开发
js比较2个版本号大小
js比较2个版本号大小
844 1
|
存储 Java Nacos
Spring Cloud+Nacos+KMS 动态配置最佳实践
本文讲述了 Spring Cloud 应用中结合 Nacos 实现了运行期配置动态更新的功能,以及在此基础上结合 KMS 在不改动代码的情况下对应用使用的敏感配置进行保护,解决将配置迁移到 Nacos 中可能存在的数据安全顾虑,并对其底层工作原理做了简单介绍。
1421 153
|
存储 人工智能 安全
OSS 深度解析:Data + AI 时代的对象存储
在 Data + AI 时代,随着大数据分析和 AI/ML 工作负载的进一步融合,对象存储 OSS 作为面向 AI 时代的数据基础设施,迎来了新的挑战与创新机遇。本话题我们将会介绍对象存储的能力创新,深度解读对象存储在实现稳定、安全、高性能和低成本背后的技术进展,并展望未来 AI 驱动趋势下的技术发展方向。
1779 2
|
前端开发
min-width/max-width 和 min-height/max-height 属性间的覆盖规则
在CSS中,min-width/max-width及min-height/max-height属性用于控制元素的最小和最大尺寸。当min-width与max-width或min-height与max-height属性同时设置时,若它们的值有冲突,max-width和max-height具有更高的优先级。这意味着元素的实际宽度和高度将受限于max-width和max-height的规定,而min-width和min-height则确保了元素不会小于所设定的最小尺寸。
|
网络协议 数据库 网络架构
华为路由器如何过滤OSPF 特定的3类LSA?
华为路由器如何过滤OSPF 特定的3类LSA?
393 0
|
资源调度
yarn 安装 卸载降级升级 以及常用指令
yarn 安装 卸载降级升级 以及常用指令
1698 1
|
缓存 NoSQL 安全
Redis 新特性篇:多线程模型解读
Redis 新特性篇:多线程模型解读
402 5