6

I am trying to scroll to top of the page using Javascript

I tried the below code

window.scrollTo(0,0)

This works in all the other tabs (in chrome browser), except the tab which had office 365 page in it

This is just plain javascript function. What am i missing?

1
  • Can you please explain a bit, what do you mean by all tabs and office 365 pages? Ideally tabs are part of some pages. Are Tabs pages office 365 pages?
    – Pradip R.
    Jul 7, 2017 at 9:28

4 Answers 4

9

That's because office 365 page is always at scrollTop:0 position.
You will see in the office 365 page that scrolling appears after ribbon gets over. Scrolling doesn't apply for whole page, instead it applies to specific div. While other sites don't have similar scenario and they works with your code.

enter image description here

so If you see in browser developer tool #s4-workspace is the specific element which has scrolling. So what your script does is move to top window, which is already at top.

So if you want to make it work, you need to do it with jQuery and then can specify below code in console of developer tool:

$('#s4-workspace').animate({ scrollTop: 0}, 'slow');

This will work only if jQuery is loaded. Other way is you can do it with below JavaScript snippet, read more here:

var elmnt = document.getElementById("s4-workspace");
elmnt.scrollTop = 0

Hope this helps!

1
  • 1
    I wanted to execute this inside an iframe so my code was window.parent.document.getElementById("s4-workspace").scrollTop = 0; Works like a cake. Thank you !! Mar 26, 2019 at 11:27
2

DISCLAIMER: MY SOLUTION WORKS FOR CLASSIC MODE & ALL OLDER VERSIONS OF SP

I was just having issues with this and found out an alternate answer without jQuery. I will write down how everything looks in my page, and then include an explanation at the bottom:

TOP OF PAGE:

    <a onclick="scrollDown()" style"cursor: pointer;">Examples at the bottom</a>

    <script>
    var workspace = document.getElementById("s4-workspace");

    function scrollDown() {

      workspace.scrollBy(0,1300);
    }
    </script>

//////

Explanation:

I wanted the user to be able to scroll down on command so I added an tag to make a specific portion of the text at the top of the page to be clickable and then added an onclick function with a variable that does this:

var workspace = document.getElementById("s4-workspace");

workspace.scrollBy(0,1300); 

Where 0 is the amount of px it will move horizontally, and 1300 is the amount of px it will move down vertically.

Hope this helps at least one person!

1

If you are using it on a Modern UI page then it may not work as in Modern UI pages, we cannot change the style or use any javascript to change the page.

For Reference:

  1. https://sharepoint.uservoice.com/forums/329214-sites-and-collaboration/suggestions/13385364-allow-javascript-customization-and-css-branding-th
  2. SharePoint Framework / Modern pages with ScriptLink Custom Action
1

I just realized, that I can't find #s4-workspace element anymore🤔. So, instead, I'm using element with data-automation-id='contentScrollRegion'. For example:

document.querySelector("[data-automation-id='contentScrollRegion']").scrollTop = 0

More info here

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.