Question

Basically, after a form is submitted I want the users browser to scroll to an area of the page that is lower down, like you might do with this code:

<a href="#lower-stuff">Click here to scroll to stuff lower down in the page</a>
<div id="lower-stuff">Stuff lower down in the page is here</div>

Except I’m not sure how to do this.

I’m using gaia (so the page doesn’t reload) I tried doing something like this:

<gaia:LinkButton runat="server" ID="SubmitButton" Text="Submit" OnClick="SubmitButton_Click" Text="Go" CssClass="goButton" **href="#lower-stuff"**/>

But that’s not allowed apparently . . .

anybody know how to achieve this?

Answer 1

you can achieve this by calling the javascript page scroll

function pageScroll() {
        window.scrollBy(0,50); // horizontal and vertical scroll increments
        scrolldelay = setTimeout('pageScroll()',100); // scrolls every 100 milliseconds
}

I agree the above code cant handle dynamic height .

Here you go

 $(document).scrollTo('#contact');

where #contact is the id of the element you want to scroll to .

For YUI try this:

var element = document.getElementById('test');
var myAnim = new YAHOO.util.Scroll(element, {
    scroll: {    
        to: [ 500, test.scrollTop ]
    } 
});
myAnim.animate();

here test is the id for the element you want to scroll to.