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);
    – itsmebasti
    Oct 28, 2017 at 13:08
  • Yes.. I have tried both.. same problem..
    – Brav
    Oct 28, 2017 at 13:09
  • just updated my answer.
    – itsmebasti
    Oct 28, 2017 at 13:57

2 Answers 2

5

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, 2017 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!

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .