4

I have a problem scrolling to the top of a lightning component page in Salesforce1. I have tried using

  1. window.scrollTo(0,0);
  2. Added the below attribute in the button tag

    oncomplete="window.scrollTo('Top',0,0);"

  3. Putting the component inside a ui:wrapperScroller and calling the method component.find('auraIdOfuiwrapper').scrollTo('Top',0,0);

But none of them seems to work. Below Code

Component

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,force:hasRecordId,force:lightningQuickAction">
  <ui:scrollerWrapper class="slds-scrollable" aura:id="scrollerTop">
     <div aura:id="homePage" class="slds-scrollable" >
       <br/>
       <br/>
       <br/>
       <br/>
       <br/>
       <br/>
       <br/>
       <br/>
       <br/>
       <br/>
       <br/>
     </div>
     <button type="button" aura:id="nextButtonWSP"  onclick="{!c.top}" oncomplete="window.scrollTo('Top',0,0);" >Top</button>
  </ui:scrollerWrapper>
 </aura:component>

Controller

top: function(component, event, helper){
    component.find('scrollerTop').scrollTo('Top',0,0);
      /*
      scrollTo('Top',0,0);
     */
},

And as per the Salesforce article on ui:scrollerWrapper this method is supported. IS this a Salesforce bug ? And if so, is there a workaround available ?

3
  • window.scrollTo('Top',0,0); won't work due to the locker service. Did you try it without defining oncomplete? btw. syntax would be window.scrollTo(0, 0);
    – Basti
    Oct 28 '17 at 13:08
  • Yes.. I have tried both.. same problem..
    – Brav
    Oct 28 '17 at 13:09
  • just updated my answer.
    – Basti
    Oct 28 '17 at 13:57
4

The propper syntax for scrollTo according to the documentation:

scrollTo('custom', 0, 0);
or
scrollTo('top');

I reproduced it, called the methods as documented and was also not able to scroll to top, I guess it's just another feature that is not working properly.

after some more research, I found out the following works:

top: function(component, event, helper){
    window.scrollTo(0, 0);
},

So we still seem to have access to the window object, I found some more details:

Restrictions to Global References LockerService applies restrictions to global references. You can access intrinsic objects, such as Array. LockerService provides secure versions of non-intrinsic objects, such as window. The secure object versions automatically and seamlessly control access to the object and its properties.

1
  • 1
    Thanks..It works in desktop but my problem is specific to mobile devices and there are some restrictions in using native scroller methods.
    – Brav
    Oct 28 '17 at 14:57
2

The below code worked for me.

var scrollOptions = {
            left: 0,
            top: 0,
            behavior: 'smooth'
        }
        window.scrollTo(scrollOptions);

Here is the reference to scrollOptions documentation

Thanks!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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