+ Start a Discussion
Beth ChelmowskiBeth Chelmowski 

Scroll to the top of the page component not displaying in a lightning console application

I need to be able to display a component in a lightning console app with a button bound to the bottom  of the screen as the user scrolls. The button will bring the user back to the top of the record page upon clicking it. My code below works on a lightning application record  page, but not on the lightning console application record page.

Please let me know if you have any suggestions on how to display this component on a console record page. 

ScrollToTopOfPage.cmp: 
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome" access="global">
    <aura:attribute name="title" type="string" default="Go to top" description="Tooltip text when the mouse moves over the element"/>
    <aura:attribute name="label" type="string" default="Go to top" description="Text to be displayed inside the button"/>
    <aura:attribute name="className" type="string" description="CSS class for element"/>
    <aura:attribute name="heightToShowButton" type="integer" default="100" description="Height after which button will be visible"/>
    <aura:attribute name="iconName" type="string" default="utility:jump_to_top" description="Lightning Design System name of the icon. Names are written in the format 'utility:down' where 'utility' is the category, and 'down' is the specific icon to be displayed."/>
    <aura:attribute name="iconPosition" type="string" default="right" description="Describes the position of the icon with respect to body. Options include left and right."/>
    
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>

    <lightning:button variant="brand" aura:id="scrollToTopBtn" class="{!'scrollToTopBtn hideBtn ' + v.className}"
                      iconName="{!v.iconName}" iconPosition="{!v.iconPosition}"
                      title="{!v.title}" label="{!v.label}" onclick="{!c.scrollToTop}"/>
</aura:component>

ScrollToTopOfPageController.js:
({    
    doInit : function(component, event, helper){
       helper.bindScrollEvent(component, event);
    },
    
    scrollToTop : function(component, event, helper) {
        window.scroll({
            top: 0, 
              behavior: 'smooth' 
        });
    }
})

ScrollToTopOfPageHelper: 
({
    bindScrollEvent : function(component, event) {
        var heightIndx = component.get("v.heightToShowButton");
        console.log("testing"); 
        window.onscroll = function() {
            console.log("scrolling"); 
            var btnCmp = component.find("scrollToTopBtn");
            if (document.body.scrollTop > heightIndx || document.documentElement.scrollTop > heightIndx) {
                $A.util.removeClass(btnCmp, 'hideBtn');
                console.log("if"); 
            } else {
                $A.util.addClass(btnCmp, 'hideBtn');
                console.log("else");
            }
        };
    }
})

ScrollToTopOfPage.css: 
.THIS.scrollToTopBtn {
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
}

.THIS.hideBtn{
    display : none;
}
ScrollToTopOfPage.design:
<design:component >
    <design:attribute name="title" default="Go to top" description="Tooltip text when the mouse moves over the element"/>
    <design:attribute name="label" default="Go to top" description="Text to be displayed inside the button"/>
    <design:attribute name="className" description="CSS class for element"/>
    <design:attribute name="iconName" default="utility:jump_to_top" description="Lightning Design System name of the icon. Names are written in the format 'utility:down' where 'utility' is the category, and 'down' is the specific icon to be displayed."/>
    <design:attribute name="iconPosition" default="right" description="Describes the position of the icon with respect to body. Options include left and right."/>
    <design:attribute name="heightToShowButton" default="100" description="Height after which button will be visible"/> 
</design:component>
JitendraJitendra
In Service Cloud there is no window scroll. Scroll which you might be thinking actually is a div scroll. Example : If I add above component in left panel of console, scroll bar which appears is from left div but not from browser window itself, which justifies that why its working on other page. 
Ashish Yaduka 8Ashish Yaduka 8
We were able to solve this by adding a component to top of the page which had a div and adding the button to the bottom of the page which scrolled up to this div by : document.getElementById('yourDivID').scrollIntoView();
Thanks for helping out through Facebook chat :)
SalesForce_52436SalesForce_52436
Hi Asish

I have tried 'document.getElementById('yourDivID').scrollIntoView();' I got this error
Uncaught Error in $A.getCallback() [Cannot read property 'scrollIntoView' of null]

I Want to scroll to top when error is occured in lightning component but nothing has worked for me,anyone please help me?

Thanks
Ashish Yaduka 8Ashish Yaduka 8
I just added a lightning component with an empty
on top of the page and scroll to that div from this button. It works fine now.
SalesForce_52436SalesForce_52436
Hi Ashish

How you did it, How you scroll to that div from this button ,Pls give me an example code so that i can understand.

Thanks