Scroll to top in a lightning component

Sorry for the delay, I didn't got a notification, also its really frustrating that I have to have "50 points" or something to reply in the right way... Anyway:

I'm assuming that you are inside S1, and you are inside a scroller, which is most likely the problem. We are planning to change some of this architecture to make it easy for you guys adding scrollable content;

So let me give you some background and see if that helps: Any component you add inside S1 one centerStage will be wrapped inside a scroller (You can look at the raw version here: http://scrollerjs.com/).

In mobile/tablet the scroller does not use native CSS scroller but instead cssTransformations (and there a lot of reasoning behind this decision). Any native scroller won't work because we have a e.preventDefault() to avoid the viewport bounce ins some platforms.

So synthetic scroller, What that means? Fundamentally that you will have the following structure:

<div class="scroller-wrapper">
  <div class="scroller-content">
    <!-- You content goes here -->
  </div>
</div>

As long as the height of the scroller-wrapper (which corresponds to an internal wrapperHeight property in the scroller) is correct everything will work, the content can have any height, everythig will be calculated correctly.

To answer some of the other questions: The scroller will try to figure out when the height has changed, and update it for you, but there might be some cases when it can't. Although I do not recommend it, you can fire a global event ui:updateSize that will force the active scrollers to check for the current size and update it accordingly, but again this is a temporary hack til we fix and provide a standard way to do this. I do not recommend the refresh view, since that has a lot of overhead.

To summarize: If the height of your container is right everything should work.


Reverse engineering based approaches might be made to work today but are almost always guaranteed to break because we (Salesforce) only maintain API contracts on publicly documented things. I've asked our resident scrolling expert Diego Ferreiro Val to chime in here on a supportable approach to solving this.


The below code worked for me.

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

Here is the reference to enter link description here.

Thanks!