Question

在Web应用程序中，我尝试使用附加到具有id Button1的asp.net按钮控件的OnClientClick事件的javascript将y轴高度增加到500来垂直滚动窗口。

我使用的脚本是

<script language="JavaScript">

function scrollToWindow()
{
  window.scrollTo(0,500);
}

</script>

，按钮代码如下

<asp:Button ID="Button1" runat="server" 
Text="Scroll to bottom" OnClientClick="scrollToWindow()" />

如果我运行此页面并单击该按钮，则页面滚动无法正常工作。当我在该脚本中调整警报并进行调试时，我发现页面实际上滚动到0,500但是由于某些原因它再次渲染到正常位置。有人可以帮助克服这个问题，让我知道背后的原因??

Answer 1

单击按钮（回发）后，将使用默认设置重新加载您的页面。 OnClientClick 不会阻止它，除非您在javascript代码中阻止回发（最后为return false;）。

Answer 2

它重置的原因是asp按钮在页面上提交。首先它是javascript onclick，然后回发到服务器，这会导致页面刷新。

解决方案1：

在aspx文件顶部的page指令中，您可以添加一个设置来维护滚动位置：

<%@ Page  MaintainScrollPositionOnPostback="True" %>

在这种情况下，您可以像原来一样定义按钮：

<asp:Button ID="Button1" runat="server" 
 Text="Scroll to bottom" OnClientClick="scrollToWindow()" />

注意：此设置在 Safari 和 Google Chrome 中无效，但适用于其他主流浏览器（ IE5 + ， Firefox ， Opera ）。

解决方案2：

要使其与 Safari 和 Google Chrome 一起使用，您可以改为实施AJAX以防止整页刷新。

 <asp:ScriptManager runat="server" ID="ScriptManager1" />
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
    <asp:Button runat="server" ID="Button1" Text="Button"
     onclick="Button1_Click" OnClientClick="alert('hello');" />
    </ContentTemplate>
    </asp:UpdatePanel>

只需确保因按钮单击而更改的所有GUI都必须属于按钮单击触发的同一<asp:UpdatePanel>。

Answer 3

整个页面可能会回发，因为它是您放置在页面上的按钮。实际上，单击它将“刷新”页面，这将导致您看到的结果。像你想要的那样运行window.scrollTo（）更适合链接或其他东西。您可以在asp：HyperLink like this中运行JavaScript，或者只使用标准HTML锚标记来完成工作。

窗口滚动与asp.net按钮控件的问题

3 个答案:

解决方案1：

解决方案2：