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

I have tried setting the scrollTo = 0

  • Can you give me more context in where is your component embedded or which components are you using? I need to know the setup, so see what would be the best way to solve the problem.
    – Diego
    Jun 3 '15 at 18:58
  • @Diego there is a list of objects. When you click on one it throws up a modal window to see more details. If you are at the top of the list no problem. If you are at the bottom of the list you have to scroll to the top to see the modal. Jun 4 '15 at 13:23
  • I have another scenario where there is a component that displays Employee's information and a button "View Manager Info" in it.Upon clicking the button same component displays manager's information.But this button lies at the bottom of the page.So when this button is clicked I want to take the user to the top of the page.Please advise how to achieve this effect
    – Suneel
    Jun 9 '15 at 16:28
  • @Diego - any further thoughts? Jun 13 '15 at 10:03
  • 1
    Yes, @BorisBachovski approach will lose the state of the component... much more significant than any UI effects. Oct 22 '16 at 18:14

10 Answers 10


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 -->

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.

  • Great answer. You would have been hard pressed to get all of this content into a comment by the way.
    – martin
    Jul 28 '15 at 17:25
  • Any success with this? I could not get it work :( May 30 '16 at 19:16
  • 1
    I have gotten the ui:updateSize event to fire and that helps, but does not solve the problem. The scroller's size does update, but it is still scrolled down to below the bottom. Any idea when/if we can use the ui:scrollTo event? It seems that this would solve the issue completely.
    – Ben
    Aug 18 '16 at 19:44

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.

  • 2
    Thanks Doug, is there any update on this scrolling to top issue in Lightning Components?
    – VarunC
    Aug 17 '16 at 9:23

The below code worked for me.

var scrollOptions = {
        left: 0,
        top: 0,
        behavior: 'smooth'

Here is the reference to enter link description here.


  • This worked simply! This one should be marked as the best answer instead of those theoretical one's!
    – karan
    Nov 14 '20 at 11:11

Use this code

let target = component.find("div-id").getElement();
  • "div-id"(in this example otherwise any div) should have scrollable functionality, that is you should be able to scroll it through your mouse wheel first. Dec 21 '21 at 19:14

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


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 = ""
  • Unfortunately it appears SF1 uses its own scrolling divs and not body div. Setting scrollTop doesn't seem to work on the scroller div, body or my own app div. Jun 3 '15 at 11:56
  • Are you using JQuery in your page? @AdrianSmalley
    – Ashwani
    Jun 3 '15 at 11:59
  • No am using native Aura / Lightning. I am trying not to add a dependancy on JQuery. Jun 3 '15 at 12:00
  • @AdrianSmalley Updated my answer.
    – Ashwani
    Jun 3 '15 at 12:30

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.


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:


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.

  • component.find('auraidofUiScroller').scrollTo('Top',0,0);
    – user39002
    Jul 26 '17 at 15:42

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

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.