单击按钮时更新面板并滚动到顶部

Question

我有以下设置：

UpdatePanel -> 多视图 -> 3 个视图

当我点击其中一个视图中的按钮时，它应该会转到下一个视图并慢慢滚动到顶部。

目前我一直在尝试以下方法，但都没有奏效（甚至没有快速滚动 - 它仍然在嘲笑我 ;-)）：

protected void PartOneContinue_Click(object sender, EventArgs e)
{
    CheckoutFlow.SetActiveView(PaymentMethodView);
    ScriptManager.RegisterStartupScript(this, this.GetType(), "myscript", "<script>scrollTo(0,0);</script>", true);
}

还有以下内容：

ScriptManager.RegisterStartupScript(this, this.GetType(), "myscript", "<script>$(window).scrollTop(100);</script>", true);

下面的ScrollToTop是一个函数，上面有两个不同的脚本：

ClientScriptManager cs = Page.ClientScript;       
cs.RegisterStartupScript(this.GetType(), "ScrollToTop", "ScrollToTop()");

任何想法都将受到高度赞赏。

Answer 1

试试这个方法

    private void SubirTelaTopo()
    {
        StringBuilder csText = new StringBuilder();
        csText.Append("$('body,html').animate({ scrollTop: 0 }, 500);");
        ScriptManager.RegisterStartupScript(this.Page, this.Page.GetType(), Guid.NewGuid().ToString(), csText.ToString(), true);
    }

Answer 2

您检查过您的文档类型吗？此外，将 html 和 body 的 (css) 高度设置为 100% 可能会有所帮助。

Answer 3

在您对ScriptManager.RegisterStartupScript 的调用中，您将传入包含<script> 标记的脚本，并为addScriptTags 参数传入true。我的猜测是在您的页面中呈现的脚本块如下所示：

<script type="text/javascript">
<script>scrollTo(0,0);</script>
</script>

我可以想象，由于嵌套的脚本标签，这在大多数浏览器中都不起作用。尝试从您的 javascript sn-p 中删除标签或将 false 传递给 addScriptTags

// Option 1
ScriptManager.RegisterStartupScript(this, this.GetType(), 
  "myscript", "scrollTo(0,0);", true);

// Option 2
ScriptManager.RegisterStartupScript(this, this.GetType(), 
  "myscript", "<script>scrollTo(0,0);</script>", false);

如果这不能解决您的问题，那么您可以考虑使用PageRequestManager.pageLoaded 事件纯粹使用客户端脚本来解决这个问题：

pageLoaded 事件在页面上的所有内容被触发后引发 refreshed，是否因为同步而被刷新 （整页）回发或异步回发。你可以用这个 事件为更新的内容提供自定义过渡效果。