You need to sign in to do that
Don't have an account?
Beth 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>
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>
Thanks for helping out through Facebook chat :)
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
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