W O R K S

Exploring creativity in Web design

How to adjust your scrollbar using javascript

You might be wonder when your customers ask you to design a page which will be opened at a certain position. Let's say, the page content should be in the middle of the browser viewport(in another way, the vertical scrollbar should be in the middle. Of course the content should be longer than the browser viewport height to get a vertical scrollbar.

How will we do it?Before that let us create some texts to make our content a little longer.To do so please click on the following link

Using scrollTop, you can change the scroll position to any appropriate value.

        //document.body.scrollHeight gives the appropriate position
        if(document.documentElement){
            document.documentElement.scrollTop =document.body.scrollHeight/4;
        }
        else if(document.body){
            document.body.scrollTop=document.body.scrollHeight/4;
        }
        

        //or tested with
        //using document.documentElement.scrollHeight does not give the appropriate position.
        if(document.documentElement){
            document.documentElement.scrollTop =document.documentElement.scrollHeight/4;
        }
        else if(document.body){
            document.body.scrollTop=document.body.scrollHeight/4;
        }
    

document.body.scrollTop does not change the scroll position in IE7. Using document.documentElement.scrollTop gives the scroll position in IE7. However I have not tested it in any other browser.