window.scrollTo is not working in SharePoint Office 365

Question

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?

Answer 1

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.

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!

Answer 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!

Answer 3

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

Answer 4

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