回发后阻止页面滚动

时间:2012-04-13 03:44:53

标签: asp.net vb.net visual-studio

我正在根据CheckBoxList中的检查添加用户的分数。每次用户选中一个框时,都会将值X添加到总分中。当用户取消选中某个框时,会从总分中减去值X。这里没问题。

我遇到的问题是在CheckBoxList属性中使用AutoPostback选项会强制页面加载回顶部而不是停留在用户所在的位置,这意味着他们必须在每次检查后继续向下滚动/取消选中。有办法防止这种情况吗?

8 个答案:

答案 0 :(得分:37)

Ajax解决方案

当然,最好的方法是使用Ajax调用。页面根本不移动,数据刚刚更新。 updatepanel是一个快速简便的启动解决方案 - 不是最佳解决方案,但如果你有一个简单的页面,它是一个非常好的。

第二种解决方案

第二种解决方案是使用锚#。您可以设置您希望它显示的点:

<a name="PointA"></a>

您使用该锚点将该页面称为page.aspx#PointA

第三种解决方案

第三种解决方案是使用ASP.NET的内部JavaScript代码。在页面声明(第一行顶部)<%@ Page MaintainScrollPositionOnPostback="true" %>

或者在web.config上影响所有页面<pages maintainScrollPositionOnPostBack="true" />

或以编程方式System.Web.UI.Page.MaintainScrollPositionOnPostBack = true;打开它并按需关闭它。

使用jQuery

只有两行jQuery代码,你可以在回帖后想要移动的点上制作一个漂亮的动画:

var WhereToMove = jQuery("#PointA").position().top;
jQuery("html,body").animate({scrollTop: WhereToMove }, 1000);

然后将页面移动到此元素:

<a id="PointA" name="PointA"></a>

Google搜索

最后,您可以使用自定义JavaScript代码执行相同操作。互联网上有许多样本:https://www.google.com/?q=asp.net+remain+position

答案 1 :(得分:6)

回发后阻止页面滚动的两种最佳方法是: 把它放在web.config中 的 1) pages maintainScrollPositionOnPostBack =“true”

很多人质疑这条线的确切位置在哪里。 因此,放置此行的确切位置是

<system.web>
<pages maintainScrollPositionOnPostBack="true">
</system.web>
  

注意:这将适用于整个解决方案,它会阻止每个表单   滚动

2)实现此目标的第二种方法是将此行放在aspx文件的顶部

MaintainScrollPositionOnPostback =真

喜欢这个

<%@ Page MaintainScrollPositionOnPostback=true Language="C#" AutoEventWireup="true" CodeBehind="xx.aspx.cs" Inherits="xx.Global" %>
  

注意:这将适用于您想要阻止的特定表格。

答案 2 :(得分:3)

我可以想到三种可能的方式:

  1. 在应禁用滚动的页面上,将Page(“&lt;%@ Page ....&gt;”)指令中的属性MaintainScrollPositionOnPostback设置为true,即{{1}应该出现在aspx页面的顶部

  2. 对于网站中的所有页面,请在web.config中添加以下行: <%@ Page MaintainScrollPositionOnPostback=true ...other settings... >

  3. 合并AJAX查询

答案 3 :(得分:1)

当您要停止滚动和页面刷新时, MaintainScrollPositionOnPostback =“ true” 标签是最重要的。

答案 4 :(得分:0)

由于runat标记,可以在.NET中以编程方式引用HTML标记。

只需在HTML中为body标签指定一个runat =“server”,并在代码中为id =“body”或任何你想要引用的内容(我将使用body作为示例)。 / p>

然后你可以在代码中添加/修改标签的属性,如下所示:

Body.Attributes.Add("scroll", "no")

将代码放在页面加载上。

答案 5 :(得分:0)

将此行放在webconfig文件中:

<pages maintainScrollPositionOnPostBack="true">

答案 6 :(得分:0)

您可以覆盖window的“ scrollTo”方法并且不执行任何操作,因此尝试通过updatePanel设置页面滚动位置会失败:)

function scrollTo(x, y) {
}

答案 7 :(得分:0)

MaintainScrollPositionOnPostback并不总是在chrome中工作,有时会导致回发所需的逻辑问题。这是一个简单的JavaScript代码,等效于MaintenanceScrollPositionOnPostback。

    window.onload = function () {
        var scrollY = parseInt('<%=Request.Form["scrollY"] %>');             
        if (!isNaN(scrollY)) {
            window.scrollTo(0, scrollY);
        }
    };
    window.onscroll = function () {
        var scrollY = document.body.scrollTop;
        if (scrollY == 0) {
            if (window.pageYOffset) {
                scrollY = window.pageYOffset;
            }
            else {
                scrollY = (document.body.parentElement) ? document.body.parentElement.scrollTop : 0;
            }
        }
        if (scrollY > 0) {
            var input = document.getElementById("scrollY");
            if (input == null) {
                input = document.createElement("input");
                input.setAttribute("type", "hidden");
                input.setAttribute("id", "scrollY");
                input.setAttribute("name", "scrollY");
                document.forms[0].appendChild(input);
            }
            input.value = scrollY;
        }
    };