Pages Starting at Bottom of Screen

[LewisReeder]

I have recently broken a large web page apart into 3 sections using the <div> tag. The user clicks the next button to move on. However when each of the 3 pages load they start at the bottom of the page (focused on the next button) and you must scroll up to see the top. What is the easiest way to make a page start at the top of the page?

I have an external style sheet but have been unsuccessful in creating a DIV class that works. Many of the elements on the page also have their own classes.

 

[BillyRayPreachersSon]

When you first load any page, it should always load with the top of the page at the top of the browser window, unless you either:

1. Have some script to move / scroll the page, or

2. Have gone to the page with an anchor in the URL, matching an anchor on the page.

If neither of these are the case, can you show your code, as I can't think of any other cause for a page to not start with the top showing at the top.

Of course, you should first check that the top isn't really at the top, and it's just your CSS that is causing the elements to appear at the bottom (which is not the same as the top not being at the top).

Hope this helps,
Dan



[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[Vragabond]

An alternative is that you are actually not reloading the page but simply changing the display properties of your divs. If you are doing that, then nothing but that changes and the page stays at the same position (i.e. by the buttons). To alter that, we would need some code as to how your next buttons work, but it would be simply a matter of adding an empty anchor.

 

[LewisReeder]

Unfortunately, I cannot post my code because 1. I am not allowed through my job and 2. It is a few thousand lines of code. All of my CSS classes are all set for the top of the page. I do not have any anchors tags.

One note I failed to mention, which may or may not be affecting this, is that I am not hosting this on a web server. I received this file as an ASP file and converted it to an html file, because I do not yet have access to our web server. I just open the html file in IE5. I will be hosting it on Monday.

Is there HTML or javascript code that I could add to the top of my page that would point to it?

 

[LewisReeder]

here is how my next button works....

<td colspan="2" class="CT">

<hr width="100%" noshade color="#0A5AA5">

<input class="form-text-teeny" type="button" name="btnNext1"   value="Next" title="Go next to previous section" onclick="SubmitClick('N', 1);">
								</td>

where SubmitClick validates all the fields and upon validation calls the function....

function hide_page(id)
	{
        	for(T=1;T<4;T++)
		{
            		if(T != id)
			{
               			 document.getElementById(T).style.display = 'none';
            		}
            		else
			{
                		 document.getElementById(T).style.display = 'block';
           		 }
        	}
    	}

 

[LewisReeder]

I realized that now the initial page load correctly, but each page(<div>) after loads to the bottom.

Vragabond - what were you saying about adding an empty anchor?

I am fairly certain that is the answer. I think it is just starting where it left off from the previous page.

 

[Vragabond]

Like I thought. Your next button is just a function that does a couple of things which at the end make a visual impression that the page has changed. Amend your function to read:

function hide_page(id)
    {
            for(T=1;T<4;T++)
        {
                    if(T != id)
            {
                            document.getElementById(T).style.display = 'none';
                    }
                    else
            {
                         document.getElementById(T).style.display = 'block';
                    }
            }
        window.location.href = '#';
        }

This will hide some elements, show others and pop you up when it is done.

 

[LewisReeder]

Thanks Vragabond, it worked perfectly.