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

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

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

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

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

那么就用这种方法了,看了一下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();
    }

}


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

 

相关文章
|
5月前
【实现手机端上滑滚动加载列表】判断页面是否滚动到底部或者指定元素位置
【实现手机端上滑滚动加载列表】判断页面是否滚动到底部或者指定元素位置
|
5月前
|
前端开发 网络安全 数据库
使用layui弹框实现添加时,当添加成功之后如何进行关闭当前窗口刷新父页面的数据
使用layui弹框实现添加时,当添加成功之后如何进行关闭当前窗口刷新父页面的数据
|
5月前
|
小程序 JavaScript
小程序自定义弹窗禁止底部内容滚动(滚动穿透问题)
小程序自定义弹窗禁止底部内容滚动(滚动穿透问题)
620 0
|
5月前
在viewWillAppear函数中禁止左滑,viewWillDisappear开启左滑动产生进入下一个页面来回滑动造成无法点击点击按钮问题
在viewWillAppear函数中禁止左滑,viewWillDisappear开启左滑动产生进入下一个页面来回滑动造成无法点击点击按钮问题
30 0
|
12月前
|
前端开发 JavaScript 容器
JavaScrpit如何实现弹出遮罩层后将页面固定到当前位置且无法继续滚动
JavaScrpit如何实现弹出遮罩层后将页面固定到当前位置且无法继续滚动
66 0
|
11月前
点击添加按钮弹框动态添加内容并且拼接在页面
点击添加按钮弹框动态添加内容并且拼接在页面
29 0
|
JavaScript
js监听页面或元素scroll事件,滚动到底部或顶部
js监听页面或元素scroll事件,滚动到底部或顶部
1224 0
js监听页面或元素scroll事件,滚动到底部或顶部
|
前端开发
上传图片组件的悬停显示删除等操作遮罩层
上传图片组件的悬停显示删除等操作遮罩层
|
Web App开发 JavaScript Android开发
jquery判断页面滚动条(scroll)是上滚还是下滚,且是否滚动到头部或者底部
webtouch(webapp)页面,防苹果手机safari浏览器,往上滑动,底部导航消失,滑动到底部又出现。向下滑动,底部导航出现。
369 0
|
JavaScript
事件监听 & 页面滚动(页面滚动到某一位置时显示/隐藏某元素,Vue环境)
事件监听 & 页面滚动(页面滚动到某一位置时显示/隐藏某元素,Vue环境)
1459 0
事件监听 & 页面滚动(页面滚动到某一位置时显示/隐藏某元素,Vue环境)