Scroll to div by id with JavaScript

Posted on 2009-02-11
Last Modified: 2012-05-06
Using only JavaScript, how can I scroll so that the div with an id of "spot" is in the top left part of the window?
<div id="spot"></div>

Open in new window

Question by:hankknight
    LVL 2

    Assisted Solution

    Include script tags pointing to the external JavaScript files.

    Place nested div's  in the document where you wish the scroll area(s) to appear.

    Adjust style specifications for the div's.

    Add scroll controls and/or scrollbar elements.

    Initialize the code.

    LVL 16

    Expert Comment

    LVL 5

    Expert Comment


    You need to know how far down the page that tag is in pixels so that you could use something like scrollTo.  To achieve this, you can use the offsetTop property of the div.  However, this returns the number of pixels the div is from the top of it's parent container.

    What you need to do therefore is measure the offsetTop of the spot div, then test it's parent property. If the div has a parent, you need to measure the parent's offsetTop, then test if that has a parent.  This continues until you reach the html tag, which doesn't have a parent.  At this point, having added up all the offset tops in your loop, you have an accurate measure of exactly how far down the page the tag is.  You can then pass this value to scrollTo.



    LVL 5

    Accepted Solution


    This is the kind of code you need.  You can pass the result of this to scrollTo, eg.

    window.scrollTo(0, absTop("spot"));

    Alternatively, you could use anchoring;

    Similar in functionality, but negates the need for javascript.

    function absTop(elementId){	
            var obj = document.getElementById(elementId);
    	var offset = 0;
    	while(obj.offsetParent) {
    		offset += obj.offsetTop;
    		obj = obj.offsetParent;

    Open in new window


    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Threat Intelligence Starter Resources

    Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

    This article shows how to read a single webpage's HTML into a string variable, and it also shows how to automate a sequence so you can read and process a list of webpages.  I was tasked with reading and parsing a series of webpages to collect some s…
    When you need to keep track of a simple list of numbers or strings, the Array object is your most direct tool.  As we saw in my earlier EE Article (, typical array handling might look like this: (CODE) B…
    The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
    The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

    760 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    9 Experts available now in Live!

    Get 1:1 Help Now