如何在页面加载时将焦点设置到特定部分并使浏览器滚动到该位置

Question

我正在使用 aps.net 和 vb.net

在我的应用程序中提交网络表单 (application.aspx) 后，用户被重定向到另一个 (application_complete.aspx) 页面。

application.aspx 页面中的webform 很长。用户必须向下滚动很多才能完成表单并提交。问题是在提交表单（appplication.aspx）后，application_complete.aspx 页面也变得很长（与 application.aspx 大小相同），尽管其中没有太多内容并使浏览器自动定位在同一位置（底部这页纸）。因此，用户必须向上滚动才能阅读消息。这对用户来说非常烦人。 （见图）

图片1 : (appplication.aspx)

图片2：application_complete.aspx

我需要什么 我想在页面加载时将页面 (application_complete.aspx) 置于页面顶部，并在该页面的消息部分设置焦点。

这是我的 application_complete.aspx 页面代码

<%@ Page Title="" Language="VB" MasterPageFile="~/c/MasterPage.master" AutoEventWireup="false" CodeFile="application-complete.aspx.vb" Inherits="c_application_complete" %>
<%@ MasterType VirtualPath="~/c/MasterPage.master" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="mainContent" Runat="Server">


<h2>Thank you! we have now received your application</h2>

<div class="btn-wrapper">
    <a target="_parent" href="<%= Master.EmployerCareersHome %>" class="btn v-view-all">View other open positions</a>
</div>

</asp:Content>

这是我的 application_complete.aspx.vb 代码

Partial Class c_application_complete
    Inherits System.Web.UI.Page

End Class

我尝试在 application_complete.aspx 页面中添加以下脚本并为 div 部分提供一个 ID。

<asp:Content ID="Content3" ContentPlaceHolderID="ScriptContent" runat="server">
<script type="text/javascript">
    $(document).ready(function() {
         $("#<%= dvbtn.ClientID %>").focus();

    });
</script>

</asp:Content>

在 application_complete.aspx.vb 页面中。

    Protected Sub PageLoad(ByVal sender As Object, ByVal e As EventArgs)

         Page.SetFocus(dvbtn)

    End Sub

但这不起作用。

供您参考

1. 整个网络表单及其所有功能都在 iframe 中。是否可以使父网页从 iframe 滚动到特定位置（顶部）。

2. 虽然 application_complete 页面中的内容并不多，但由于表单很长（在 application.aspx 页面中），此页面（application_complete）也变得很长。如果有人刷新它，页面就会恢复到原来的大小并专注于顶部位置。但是刷新会导致重新提交表单，所以不能这样做。

期待您的帮助。

Answer 1

在你的页面中放置一个类似这样的锚：

<a name="loadtohere" />

然后在您的重定向中，将页面发送到：

page.aspx#loadtohere

编辑：

好的，在你的源代码文件中添加上面的html：

<a name="loadtohere" />

然后在你的代码后面：

// Create the redirect link (better way of creating your string)
Dim redirect = String.Format("application-complete.aspx?e={0}&b={1}&i={2}&hp={3}&hI={4}#loadtohere, Vacancy.EmployerID, CInt(Request("b")), Vacancy.ID, Request("hp"), Request("hI"))

// Redirect to the page
Response.Redirect(redirect)

“loadtohere”文本可以更改为您想要的任何内容，它只是页面加载时移动到的锚点的名称。

Answer 2

我的元素没有获得焦点的原因是因为它是 <div> 而不是实际的 <button> 元素。默认情况下，<div> 元素不会作为 Tab 键顺序的一部分被拾取，因此它们通常根本不会获得焦点。

所以我通过向我的 div 元素添加 tabindex 属性解决了聚焦问题。

<div class="btn-wrapper" id="dvbtn" runat="server" tabindex="0" autofocus>
    <a target="_parent" href="<%= Master.EmployerCareersHome %>" class="btn v-view-all">View other open positions</a>
</div>

和脚本

<asp:Content ID="Content3" ContentPlaceHolderID="ScriptContent" runat="server">
   <script type="text/javascript">
         $(document).ready(function() {
              $("#<%= dvbtn.ClientID %>").focus();

         });
   </script>

</asp:Content>

setfocus 也解决了滚动的问题。