Updatepanel and scroll to top when clicking a button

Question

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.

Have a look at this post http://stackoverflow.com/questions/1174863/javascript-scrollto-method-does-nothing — PMC, Jan 08 '12 at 13:59
No luck, unfortunately. I tried: ScriptManager.RegisterStartupScript(this, this.GetType(), "scroll", "$('#LeveringsDiv').animate({ scrollTop: elementOffset }, 200);", true); Where leveringsdiv is a div in the bottom of the view with the button this is fun in. — Lars Holdgaard, Jan 08 '12 at 14:21

score 2 · Answer 1 · answered Sep 08 '14 at 14:16

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

score 0 · Answer 2 · answered Jan 08 '12 at 14:38

0

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

answered Jan 08 '12 at 14:38

matthijs koevoets

376
2
4

What do you mean about the doctype? I will test the 100% – Lars Holdgaard Jan 08 '12 at 14:41
I think it needs the transitional dtd: – matthijs koevoets Jan 08 '12 at 14:43
I have that, still gives a problem. – Lars Holdgaard Jan 08 '12 at 14:53
did you try an alert/ console.log to make sure your script is executed at all? As in: ScriptManager.RegisterStartupScript(this, this.GetType(), "myscript", "alert('hello world')", true); – matthijs koevoets Jan 08 '12 at 16:17

Michiel van Oosterhout · Answer 3 · 2012-01-08T14:50:29.187

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.

I just tried this, and nothing happens. Any idea how to track what exactly gives a problem? — Lars Holdgaard, Jan 08 '12 at 14:53
Have a look at the DOM after the update has happened using Chrome Developer Tools or Firefox Firebug to see if you previously had two nested script tags. Also edit your question with any JavaScript errors you get in the JavaScript console. — Michiel van Oosterhout, Jan 08 '12 at 15:11

Updatepanel and scroll to top when clicking a button

3 Answers3