代码改变世界

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

2008-03-12 17:45  金色海洋(jyk)  阅读(3235)  评论(6编辑  收藏  举报

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

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

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

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

}


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

 

2