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. – Adrian Smalley 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? – Adrian Smalley Jun 13 '15 at 10:03
  • Can't you just force refresh the component? $A.get('e.force:refreshView').fire(); – Boris Bachovski Jun 24 '15 at 5:01
up vote 14 down vote accepted

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.

  • 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 :( – Surya Chandra Rao Gandreddi May 30 '16 at 19:16
  • 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

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 = ""
   }
scroll();
  • 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. – Adrian Smalley 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. – Adrian Smalley 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.

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

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!

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
    This is not locker compatible . – Pranay Jaiswal Apr 24 '17 at 12:14

Your Answer

 
discard

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.