Take the 2-minute tour ×
SharePoint Stack Exchange is a question and answer site for SharePoint enthusiasts. It's 100% free, no registration required.

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

Using the following code:

$(document).ready(function(){
    $('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() {
    $('form[action="AreaNavigationSettings.aspx"]')
        .closest('body')
        .css('overflow', 'visible')
        .find('#s4-workspace')
        .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?

share|improve this question

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...

share|improve this answer
    
The first code scrolls at least - just scrolls back, this second code does not scroll at all. –  newuser007 Jul 31 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 –  Tiago Duarte Aug 1 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 Aug 1 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. Aug 1 at 12:57
1  
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 –  Tiago Duarte Aug 2 at 11:33
up vote 1 down vote accepted

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:

    $('form[action="AreaNavigationSettings.aspx"]')
    .closest('body')
    .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

share|improve this answer
    
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. Aug 9 at 14:05

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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