Scroll to top in a lightning component

Question

How do I to the top of a page in a lightning component?

I have tried setting the scrollTo = 0

Answer 1

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.

Answer 2

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!

Answer 3

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.

Answer 4

Use this code

let target = component.find("div-id").getElement();
if(target){
    target.scrollTop=0;
}

Answer 5

Just FYI, looks like a component has been released to affect the position within the scroller-wrapper class mentioned in the solution comment by @Diego.

Here is the lightning component: https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/aura_compref_ui_scrollerWrapper.htm

Answer 6

I haven't tested it but it would work:

 <li onclick="scroll">{{item}}</li>

    function scroll() {
        var myCont = document.getElementsByClassName ("actionBarPlugin");
        myCont[0].scrollLeft = 0;
        myCont[0].style.cssText = ""
   }
scroll();

Answer 7

I have tried the following hack using Jquery and updating CSS 'transform' property. Its based on one of above reply as CSS scroller is not used in lightning, but instead cssTransformations.

The following class is found through jquery and transform css property is updated. Well this bring to top of page.But, still there is an issue when you tries to scroll down, the first touch on a mobile screen causes page to move down to previous bottom position. Further touch on screen do a normal behaviour.

var cssScrolltoTop = $(".scroller"); // css class to find scroll position
    if (cssScrolltoTop) {
        var cssScrolltoTopTransform = cssScrolltoTop.css("transform");
        if (cssScrolltoTopTransform) {
            cssScrolltoTop.css("transform", "translate3d(0px, 0px, 0px)"); //set 'transform' since lighntning architecture uses css 'transfrom' property to scroll 
        }
    }

The right way would be mostly to figure out firing ui:updateSize event, which I was not successfull yet.

Answer 8

The following will do the trick:

1. Give the <body> tag an id:

   <body id="body">
   

2. Apply this JavaScript code to scroll to the top:

   document.getElementById('body').scrollIntoView(true);
   

Answer 9

I have faced similar problem but i have used scrollTo('Top',0,0) method of ui:scroller tag. it will reset the scroller position to top.

Answer 10

To make the scrollTop = 0 to work the container div has to have an internal scroll. Which we can get by either giving a height via px or via vh.

Try that out it should work. I was facing a similar issue while adding LWC inside Flexi Page. The Flexi page has its own scroller but for that, the scrollTop doesn't work. But if we create a separate scroller at the top-level div then the scrollTop starts to work.

Check this out. I have created this and it works perfectly fine for me: https://webcomponents.dev/edit/3vpWJ46hxykfPSACfuNN