CODEWITHSUNDEEP
javascriptjqueryasp.netupdatepanelscriptmanager
Lars Holdgaard
Lars Holdgaard

Reputation: 9966

Updatepanel and scroll to top when clicking a button

I have the following setup:

UpdatePanel -> Multiview -> 3 Views

When I click on a button in one of the views, it should go to the next view and slowly scroll to the top.

Currently I've been trying the following methods, of which none worked (not even a quick scroll - it just stays still laughing at me ;-) ):

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

And the following:

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

And the following where ScrollToTop was a function with the two different scripts from above:

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

Any ideas would be highly appreciated.

Upvotes: 1

Views: 2422

Answers (3)

Duarte
Duarte

Reputation: 21

Try this Method

    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);
    }

Upvotes: 2

Michiel van Oosterhout
Michiel van Oosterhout

Reputation: 23084

In your calls to ScriptManager.RegisterStartupScript you are passing in the script including <script> tags and also passing in true for the addScriptTags parameter. My guess is that the script block that is rendered in your page looks like this:

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

I can imagine that this doesn't work in most browsers because of the nested script tags. Try removing the tags from your javascript snippet or passing false for 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);

If this doesn't solve your problem, then you can consider solving this purely with client-side script, using the PageRequestManager.pageLoaded event:

The pageLoaded event is raised after all content on the page is refreshed, whether it was refreshed because of a synchronous (full-page) postback or an asynchronous postback. You can use this event to provide a custom transition effect for updated content.

Upvotes: 0

matthijs koevoets
matthijs koevoets

Reputation: 386

Did you check your doctype? Also setting the (css) height of html and body to 100 percent may help.

Upvotes: 0

Related Questions