News & Views.

The latest news, web designs and digital projects happening at Storm.

Sharing is caring:

Scroll an element into view programmatically with JavaScript

Adam Pope Profile Image

Adam Pope
June 14, 2010

I’ve just finished building an FAQ section for one of Storm‘s clients. The client requested that a list of questions be shown at the top of the page and the user be scrolled to the appropriate answer when they clicked the question. The site was using a URL re-writing scheme that meant using traditional #anchor links was impossible. We got around this by using a very simple piece of JavaScript.

document.getElementById('MyID').scrollIntoView(true);

This method will jump you straight to the top of the element with Id MyID. If you want to animate the scroll down the page, then a simple little bit of jQuery will give the right effect.

$("#my-link-id").click(
    function()
    {
        $('html:not(:animated), body:not(:animated)').animate({
            scrollTop: $("#scrollToHere").offset().top
        }, 2000);
    }
);