10

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

I have tried setting the scrollTo = 0

7
  • 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
    Commented Jun 3, 2015 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. Commented Jun 4, 2015 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
    Commented Jun 9, 2015 at 16:28
  • @Diego - any further thoughts? Commented Jun 13, 2015 at 10:03
  • 1
    Yes, @BorisBachovski approach will lose the state of the component... much more significant than any UI effects. Commented Oct 22, 2016 at 18:14

10 Answers 10

15

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.

3
  • Great answer. You would have been hard pressed to get all of this content into a comment by the way.
    – martin
    Commented Jul 28, 2015 at 17:25
  • Any success with this? I could not get it work :( Commented May 30, 2016 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
    Commented Aug 18, 2016 at 19:44
5

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!

2
  • This worked simply! This one should be marked as the best answer instead of those theoretical one's!
    – karan
    Commented Nov 14, 2020 at 11:11
  • Beautiful. In my lwc I did: scrollOptions = { left: 0, top: 0, behavior: 'smooth' } window.scrollTo(this.scrollOptions)
    – Navigatrix
    Commented Oct 27, 2022 at 20:27
4

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.

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

Use this code

let target = component.find("div-id").getElement();
if(target){
    target.scrollTop=0;
}
1
  • "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. Commented Dec 21, 2021 at 19:14
1

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

0

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();
4
  • 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. Commented Jun 3, 2015 at 11:56
  • Are you using JQuery in your page? @AdrianSmalley
    – Ashwani
    Commented Jun 3, 2015 at 11:59
  • No am using native Aura / Lightning. I am trying not to add a dependancy on JQuery. Commented Jun 3, 2015 at 12:00
  • @AdrianSmalley Updated my answer.
    – Ashwani
    Commented Jun 3, 2015 at 12:30
0

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.

0

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);
    
2
0

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.

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

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

You must log in to answer this question.

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