JQuery Page Scroll on Load

JQuery can be used to smoothly re-position the web page With an onload I positioned the page at the top of a form.

I began by adding links to reposition the page back to the top and then extended this to incorporate the JQuery onload to set the top of the page.

A point is required on the page which the browser will orientate to, scrolling the page up or down, so that it is at the top of the browser window.

A hyperlink anchor is created, I called the reference FormTop.

<a id=”FormTop”>

and added a little above the form on the page.

A return to top link can be added further down the page using a simple hyperlink.

<a href=”#” class=”FormTop”>Top</a>

or with an image

<a href=”#” class=”FormTop”><img src=”/images/top.gif” alt=”Top” width=”50″ height=”20″></a>
However, I was creating a back to top for a DotNetNuke skin. In this situation the above was converted to:
<a href=”<%= SkinPath%>#top”><img src=”/images/top.gif” alt=”Top” width=”50″ height=”20″></a>

I therefore needed to implement the back to page top using a different method. JavaScript can be used to define a move to a specific coordinate, for example 0,0.

<img onClick=”javascript:scroll(0,0)” onmouseover=”this.style.cursor=’pointer'” src=”/images/top.gif” alt=”Scroll to top of form” />

By using JavaScript to achieve the Top of Page function enabled me to build this into a DotNetNuke skin. It also means that the page repositioning did not require a page refresh and a call back to the server. The function is dependant upon the client browser having JavaScript enabled for the website.

The JQuery to scroll to the top of the form on page load is

<script type="text/javascript">
$(document.ready(function(){
$('.FormTop').click(function(){
$('html, body').animate({scrollTop: $('#Formtop').offset().top}, 'slow');
return false;
});
});
</script>

and the JQuery to perform the scoll to the top of the form on page load is

<script type="text/javascript">
$(document.ready(function(){
$('html, body').animate({scrollTop: $('#Formtop').offset().top}, 'slow');
});
</script>