I try to scroll the SharePoint page after the page loaded.

Using the following code:

    $('html, body').animate({scrollTop: $('#WebPartWPQ1').offset().top}, 1000);

It starts scrolling the page, he problem is, that it scrolls back immediately.

Please help, how can I set in SharePoint 2010 not to scroll back after the page is loaded?

EDIT: I found the following code here:

$(document).ready(function() {
        .css('overflow', 'visible')
        .css('overflow', 'hidden');

which removes the scrollbar from the right of '#s4-workspace', I am wondering how this code could be modified not to remove scrollbar, but scroll to position?

2 Answers 2


I'm not sure how your code is working - unless you have a very customized version of the Master page... In SharePoint >= 2010, the "body" of the page (area below the ribbon that has a scroll bar) is actually a <div> with an id of s4-workspace... Try this:

$("#s4-workspace").animate({scrollTop: $('#WebPartWPQ1').offset().top}, 1000);

The above code works for me on SP2013 from the console...

If it is still scrolling back, then maybe add a setTimeout() with about 100ms dealy... something else is trying to get focus and thus the page is jumping...

  • The first code scrolls at least - just scrolls back, this second code does not scroll at all.
    – newuser007
    Commented Jul 31, 2014 at 23:20
  • +1 the code from @Paul works fine provided that you are using the ootb master page, jquery is loaded, and you are doing that on document ready. no delay required. now, if you are using custom branding, that's another problem Commented Aug 1, 2014 at 7:50
  • ootb master - ok; jquery - loaded, the first working version validates; document ready - same code used as the first, with the second animate java code
    – newuser007
    Commented Aug 1, 2014 at 12:16
  • I can't understand how $('html, body').animate() can be working. the OOB master page and the content of the page is not placed inside of the body tag... its inserted into an element with id of s4-workspace. I doubt you are using an OOB page or maybe there is something else on the page that has forced/inserted items into the body tag. Can you post the html markup of the page somewhere? Also, when you say that the code on your initial post works: is the Ribbon still accessible? do you get scroll bars on the browser window that spans entire height of the window - or only below the ribbon?
    – Paul T.
    Commented Aug 1, 2014 at 12:57
  • 2
    newuser's code animates and then immediately jumps into the top. I managed to reproduce the same behaviour. @paul's code is working for me, but not for the user, apparently, which may lead to custom stuff running on his side Commented Aug 2, 2014 at 11:33

Paul, Tiago, thanks again for the suggestions!

The solution was much closer I expected.

It seems that after $(document).ready there are still scripts running which overwrite executed commands.

This I could find out using the above code in the "EDIT:" part of my comment:

    .css('overflow', 'visible');

The snippet added back the scrollbar for the whole page, however, only momentarily.

Searching then for

"how to execute jQuery after all $(document).ready() done"

I found

"use $(window).load(), which fires after $(document).ready()"

With this Even Paul's code works like charm

  • I think you should be using SharePoint's built in functions that allow you to add a callback to be executed after the page loads... If you are messing with window.load() then you are also messing with SHarepoint's load functions - which are bound to the load events... Some of the methods can be found here: sharepoint.stackexchange.com/questions/93937/… Also: Is this really the solution to your original problem? How did you ultimately fix the problem of scrolling to a given element?
    – Paul T.
    Commented Aug 9, 2014 at 14:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.