question

sajithgh avatar image
0 Votes"
sajithgh asked sajithgh commented

Team Site Scroll down middle of the page on load

There is a requirement of Team Site Scroll down middle of the page on load. How to achieve this ?

Under document.ready function of jquery is prefered.

143685-2021-10-26-11-05-02.png


office-sharepoint-onlineoffice-sharepoint-server-development
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

RaytheonXie-MSFT avatar image
0 Votes"
RaytheonXie-MSFT answered sajithgh commented

Hi @sajithgh ,
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 middle window, which is already at top. We can scroll to middle window using following js code by adjust y-axis.

     <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
     <script>
         $(document).ready(function() {
             ExecuteOrDelayUntilScriptLoaded(scrollWin,"sp.js");            
         });
            
         function scrollWin() {
             $('#s4-workspace').animate({ scrollTop: 500}, 'slow');
                
         }
     </script>


If the answer is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.




· 3
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Getting the following error.
143950-2021-10-27-8-11-22.png



The site is a modern team site without office 365 Group.

0 Votes 0 ·

Hi @sajithgh ,
Please replace the code

 ExecuteOrDelayUntilScriptLoaded(scrollWin,"sp.js");

to

 setTimeout(scrollWin, 0);

for the modern page

0 Votes 0 ·

Still it is not working. No error now. Is this div id #s4-workspace valid for Modern Site ?

0 Votes 0 ·
RaytheonXie-MSFT avatar image
0 Votes"
RaytheonXie-MSFT answered sajithgh commented

Hi @sajithgh ,
In modern page, the function should be used to the element $('.is_an_ada2ac09'). The code should be like following

      $(document).ready(function() {
          setTimeout(scrollWin, 0);            
      });
            
      function scrollWin() {
          $('.is_an_ada2ac09').animate({ scrollTop: 500}, 'slow');    
      }

· 3
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

$('.is_an_ada2ac09').animate({ scrollTop: 500}, 'slow'); - This code is not working.

144195-2021-10-27-14-31-55.png



Tried the below code as well. Not working.

function scrollWin() {
document.querySelector("[data-automation-id='contentScrollRegion']").scrollTop = 300;
}


0 Votes 0 ·

Hi @sajithgh ,
Did you deploy your js code to modern page by react-script-editor or other spfx?

0 Votes 0 ·

Yes. by react-script-editor .(Modern Script Editor)

0 Votes 0 ·