jQuery - make a DIV visible on the browser
<p>I have designed a long form around two pages. After the user submits the form, I need to force him/her to see the top of the form if the form contains any errors.</p>

<p>I have an error holder on top of the form.</p>

<p>My question is how to make the browser scrolls to the error holder so that the user can easily see it?</p>

<p>Thank you</p>

<p>/////////////////////////////////////////// follow Peter's comments</p>

<pre><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;jQuery&lt;/title&gt;
    &lt;script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript"&gt;

    // This is a functions that scrolls to the element with id id
    function goToByScroll(id)
    {
        // Scroll
        $('html,body').animate({
            scrollTop: $(id).offset().top}, 'slow');
    };

    $(document).ready( function() {
      debugger;
      $('#clearhere').click(function() {
        goToByScroll('topbar2');
      });
    });

    &lt;/script&gt;    

&lt;/head&gt;
&lt;body&gt;
    &lt;div id="topbar2"&gt;Hello world&lt;/div&gt;

    &lt;div&gt;DDDDDDDDDDDDDD&lt;/div&gt;
    &lt;div&gt;DDDDDDDDDDDDDD&lt;/div&gt;
    &lt;div&gt;DDDDDDDDDDDDDD&lt;/div&gt;
    &lt;div&gt;DDDDDDDDDDDDDD&lt;/div&gt;
    &lt;div&gt;DDDDDDDDDDDDDD&lt;/div&gt;
    &lt;div&gt;DDDDDDDDDDDDDD&lt;/div&gt;
    &lt;div&gt;DDDDDDDDDDDDDD&lt;/div&gt;
    &lt;div&gt;DDDDDDDDDDDDDD&lt;/div&gt;
    &lt;div&gt;DDDDDDDDDDDDDD&lt;/div&gt;
    &lt;div&gt;DDDDDDDDDDDDDD&lt;/div&gt;
    &lt;div&gt;DDDDDDDDDDDDDD&lt;/div&gt;
    &lt;div&gt;DDDDDDDDDDDDDD&lt;/div&gt;
    &lt;div&gt;DDDDDDDDDDDDDD&lt;/div&gt;
    &lt;div&gt;DDDDDDDDDDDDDD&lt;/div&gt;
    &lt;div&gt;DDDDDDDDDDDDDD&lt;/div&gt;
    &lt;div&gt;DDDDDDDDDDDDDD&lt;/div&gt;
    &lt;div&gt;DDDDDDDDDDDDDD&lt;/div&gt;
    &lt;div&gt;DDDDDDDDDDDDDD&lt;/div&gt;
    &lt;div&gt;DDDDDDDDDDDDDD&lt;/div&gt;
    &lt;div&gt;DDDDDDDDDDDDDD&lt;/div&gt;
    &lt;div&gt;DDDDDDDDDDDDDD&lt;/div&gt;
    &lt;div&gt;DDDDDDDDDDDDDD&lt;/div&gt;
    &lt;div&gt;DDDDDDDDDDDDDD&lt;/div&gt;
    &lt;div&gt;DDDDDDDDDDDDDD&lt;/div&gt;
    &lt;div&gt;DDDDDDDDDDDDDD&lt;/div&gt;
    &lt;div&gt;DDDDDDDDDDDDDD&lt;/div&gt;
    &lt;div&gt;DDDDDDDDDDDDDD&lt;/div&gt;
    &lt;div&gt;DDDDDDDDDDDDDD&lt;/div&gt;
    &lt;div&gt;DDDDDDDDDDDDDD&lt;/div&gt;
    &lt;div&gt;DDDDDDDDDDDDDD&lt;/div&gt;
    &lt;div&gt;DDDDDDDDDDDDDD&lt;/div&gt;
    &lt;div&gt;DDDDDDDDDDDDDD&lt;/div&gt;
    &lt;div&gt;DDDDDDDDDDDDDD&lt;/div&gt;
    &lt;div&gt;DDDDDDDDDDDDDD&lt;/div&gt;
    &lt;div&gt;DDDDDDDDDDDDDD&lt;/div&gt;
    &lt;div&gt;DDDDDDDDDDDDDD&lt;/div&gt;
    &lt;div&gt;DDDDDDDDDDDDDD&lt;/div&gt;
    &lt;div&gt;DDDDDDDDDDDDDD&lt;/div&gt;
    &lt;div&gt;DDDDDDDDDDDDDD&lt;/div&gt;
    &lt;div&gt;DDDDDDDDDDDDDD&lt;/div&gt;
    &lt;div&gt;DDDDDDDDDDDDDD&lt;/div&gt;
    &lt;div&gt;DDDDDDDDDDDDDD&lt;/div&gt;
    &lt;div&gt;DDDDDDDDDDDDDD&lt;/div&gt;
    &lt;div&gt;DDDDDDDDDDDDDD&lt;/div&gt;



    &lt;button type="button" id="clearhere" name="clearhere"&gt;Click Me!&lt;/button&gt;    
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>///////////////////////////////////////////</p>
