Sticky Scroll to Top Button in LWC

Hi Folks,

This is a very simple requirement but often we get stuck and while googling about it we don't find a solid solution that would directly work in Salesforce LWC.

Here I am writing my blog which can be used in your LWC directly, just need to follow the below points.

Few points before jumping on to the entire code.

  1. We are going to use the Element.scrollTop property to control the scroll bar.
  2. This code works if you have a specific Scroll Bar for your element. Meaning you have added a custom scroll bar for your <div>
    How to do that?

    First, add a topmost div with a class and an onscroll method which would be able to calculate at which position is your scroll bar is currently.

    <div class="top-most-div" onscroll={onScroll}>
    <!-- All your other code-->
    </div>

  3. Add the CSS for the top-container
    .top-most-div{
    overflow-y: scroll;
    height:80vh;
    scroll-behavior: smooth;
    }
  4. If you want to show the "Scroll To Top" button after scrolling certain pixels then add this kind of logic:
    onScroll (event) {
    let knowledgeWidgetElement = this.template.querySelector('.top-most-div');
    if (this.isInsideEntry && knowledgeWidgetElement.scrollTop > 20 && !this.showContentByIdErrorSVG && this.showCompleteEntry) {
    this.showBackToTop = true; // Variable that will hide/unhide the button
    }
    else {
    this.showBackToTop = false;
    }
    }
  5. The HTML Code snippet that creates the button:

    <template if:true={showBackToTop}>
    <div class="container slds-m-top_large">
    <!-- The "container class is responsible for showing the button as sticky"-->
    <span class="slds-badge slds-badge_inverse move-to-top" onclick={scrollTopHandler}
    >Scroll to Top
    <span class="slds-badge__icon slds-badge__icon_right slds-badge__icon_inverse">
    <span class="slds-icon_container slds-current-color">
    <lightning-icon
    icon-name="utility:arrowup"
    size="xx-small"
    alternative-text="Scroll to top">
    </lightning-icon>
    </span>
    </span>
    </span>
    </div>
    </template>
  6. Implementing the CSS for the container class.
    .container{
    display: flex;
    justify-content: center;
    vertical-align: middle;
    position: sticky;
    bottom: 20px;
    overflow: hidden;
    }
  7. Implementing the scrollTopHandler JS Method.
    scrollTopHandler(event){
    let knowledgeWidgetElement = this.template.querySelector('.top-most-div');
    knowledgeWidgetElement.scrollTop=0;
    }
Note: This 'scrollTop' is the actual code that lets the scroller move to the topmost point of the div. And this only works if we have a specified div for us. In case we don't want to have a specified div then we have to use Element.scrollIntoView().

The whole working code is present HERE.
HTML
<template>
<div class="top-most-div" onscroll={onScroll}>
<p>12Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eu felis a ipsum faucibus rhoncus. Etiam vitae
elit id est ultricies imperdiet. Fusce in euismod odio, nec accumsan nunc. Nulla facilisi. Pellentesque a
malesuada lacus, in gravida purus. Nam consectetur condimentum lectus at condimentum. Etiam blandit velit at
egestas viverra. Etiam dapibus quis nisi nec cursus. In dictum vestibulum velit, eu mollis leo porttitor sed.
Nullam sollicitudin enim ut tempor imperdiet. Vestibulum aliquet volutpat nulla, vitae posuere nulla vestibulum
iaculis. Quisque commodo, mi cursus condimentum ultricies, mauris neque auctor massa, sed sollicitudin urna quam
ut quam.Etiam diam neque, laoreet at elit in, convallis pulvinar metus. Duis blandit varius dolor, id facilisis
est tempus eu. Aliquam erat volutpat. Morbi ultricies velit ut nunc egestas iaculis. Aliquam blandit mi a tellus
tempus, id consequat mi tristique. Nam tempus sed lacus in semper. Integer cursus leo eu auctor luctus.Fusce nec
molestie est, eu auctor enim. Donec commodo quam eget magna condimentum efficitur non sed lectus. Aliquam
scelerisque libero in vestibulum volutpat. Aliquam et rhoncus nunc, sed pharetra orci. Aenean gravida libero
justo, non euismod eros molestie ut. Nulla eget commodo sem. Nullam ornare hendrerit pharetraIn lectus risus,
venenatis vel magna eget, mollis aliquet nibh. Nullam ac sem hendrerit purus placerat tincidunt. Morbi nec dolor
ac nisl dictum cursus. Sed feugiat elit sed luctus malesuada. Interdum et malesuada fames ac ante ipsum primis in
faucibus. Donec porttitor lectus ac ipsum dictum aliquet. Sed eleifend commodo imperdiet. Sed molestie varius
consequat. Morbi viverra lacus ex. Curabitur a dignissim lorem. Aenean quis congue justo..Lorem ipsum dolor sit
amet, consectetur adipiscing elit. Nullam eu felis a ipsum faucibus rhoncus. Etiam vitae
elit id est ultricies imperdiet. Fusce in euismod odio, nec accumsan nunc. Nulla facilisi. Pellentesque a
malesuada lacus, in gravida purus. Nam consectetur condimentum lectus at condimentum. Etiam blandit velit at
egestas viverra. Etiam dapibus quis nisi nec cursus. In dictum vestibulum velit, eu mollis leo porttitor sed.
Nullam sollicitudin enim ut tempor imperdiet. Vestibulum aliquet volutpat nulla, vitae posuere nulla vestibulum
iaculis. Quisque commodo, mi cursus condimentum ultricies, mauris neque auctor massa, sed sollicitudin urna quam
ut quam.Etiam diam neque, laoreet at elit in, convallis pulvinar metus. Duis blandit varius dolor, id facilisis
est tempus eu. Aliquam erat volutpat. Morbi ultricies velit ut nunc egestas iaculis. Aliquam blandit mi a tellus
tempus, id consequat mi tristique. Nam tempus sed lacus in semper. Integer cursus leo eu auctor luctus.Fusce nec
molestie est, eu auctor enim. Donec commodo quam eget magna condimentum efficitur non sed lectus. Aliquam
scelerisque libero in vestibulum volutpat. Aliquam et rhoncus nunc, sed pharetra orci. Aenean gravida libero
justo, non euismod eros molestie ut. Nulla eget commodo sem. Nullam ornare hendrerit pharetraIn lectus risus,
venenatis vel magna eget, mollis aliquet nibh. Nullam ac sem hendrerit purus placerat tincidunt. Morbi nec dolor
ac nisl dictum cursus. Sed feugiat elit sed luctus malesuada. Interdum et malesuada fames ac ante ipsum primis in
faucibus. Donec porttitor lectus ac ipsum dictum aliquet. Sed eleifend commodo imperdiet. Sed molestie varius
consequat. Morbi viverra lacus ex. Curabitur a dignissim lorem. Aenean quis congue justo..Lorem ipsum dolor sit
amet, consectetur adipiscing elit. Nullam eu felis a ipsum faucibus rhoncus. Etiam vitae
elit id est ultricies imperdiet. Fusce in euismod odio, nec accumsan nunc. Nulla facilisi. Pellentesque a
malesuada lacus, in gravida purus. Nam consectetur condimentum lectus at condimentum. Etiam blandit velit at
egestas viverra. Etiam dapibus quis nisi nec cursus. In dictum vestibulum velit, eu mollis leo porttitor sed.
Nullam sollicitudin enim ut tempor imperdiet. Vestibulum aliquet volutpat nulla, vitae posuere nulla vestibulum
iaculis. Quisque commodo, mi cursus condimentum ultricies, mauris neque auctor massa, sed sollicitudin urna quam
ut quam.Etiam diam neque, laoreet at elit in, convallis pulvinar metus. Duis blandit varius dolor, id facilisis
est tempus eu. Aliquam erat volutpat. Morbi ultricies velit ut nunc egestas iaculis. Aliquam blandit mi a tellus
tempus, id consequat mi tristique. Nam tempus sed lacus in semper. Integer cursus leo eu auctor luctus.Fusce nec
molestie est, eu auctor enim. Donec commodo quam eget magna condimentum efficitur non sed lectus. Aliquam
scelerisque libero in vestibulum volutpat. Aliquam et rhoncus nunc, sed pharetra orci. Aenean gravida libero
justo, non euismod eros molestie ut. Nulla eget commodo sem. Nullam ornare hendrerit pharetraIn lectus risus,
venenatis vel magna eget, mollis aliquet nibh. Nullam ac sem hendrerit purus placerat tincidunt. Morbi nec dolor
ac nisl dictum cursus. Sed feugiat elit sed luctus malesuada. Interdum et malesuada fames ac ante ipsum primis in
faucibus. Donec porttitor lectus ac ipsum dictum aliquet. Sed eleifend commodo imperdiet. Sed molestie varius
consequat. Morbi viverra lacus ex. Curabitur a dignissim lorem. Aenean quis congue justo..Lorem ipsum dolor sit
amet, consectetur adipiscing elit. Nullam eu felis a ipsum faucibus rhoncus. Etiam vitae
elit id est ultricies imperdiet. Fusce in euismod odio, nec accumsan nunc. Nulla facilisi. Pellentesque a
malesuada lacus, in gravida purus. Nam consectetur condimentum lectus at condimentum. Etiam blandit velit at
egestas viverra. Etiam dapibus quis nisi nec cursus. In dictum vestibulum velit, eu mollis leo porttitor sed.
Nullam sollicitudin enim ut tempor imperdiet. Vestibulum aliquet volutpat nulla, vitae posuere nulla vestibulum
iaculis. Quisque commodo, mi cursus condimentum ultricies, mauris neque auctor massa, sed sollicitudin urna quam
ut quam.Etiam diam neque, laoreet at elit in, convallis pulvinar metus. Duis blandit varius dolor, id facilisis
est tempus eu. Aliquam erat volutpat. Morbi ultricies velit ut nunc egestas iaculis. Aliquam blandit mi a tellus
tempus, id consequat mi tristique. Nam tempus sed lacus in semper. Integer cursus leo eu auctor luctus.Fusce nec
molestie est, eu auctor enim. Donec commodo quam eget magna condimentum efficitur non sed lectus. Aliquam
scelerisque libero in vestibulum volutpat. Aliquam et rhoncus nunc, sed pharetra orci. Aenean gravida libero
justo, non euismod eros molestie ut. Nulla eget commodo sem. Nullam ornare hendrerit pharetraIn lectus risus,
venenatis vel magna eget, mollis aliquet nibh. Nullam ac sem hendrerit purus placerat tincidunt. Morbi nec dolor
ac nisl dictum cursus. Sed feugiat elit sed luctus malesuada. Interdum et malesuada fames ac ante ipsum primis in
faucibus. Donec porttitor lectus ac ipsum dictum aliquet. Sed eleifend commodo imperdiet. Sed molestie varius
consequat. Morbi viverra lacus ex. Curabitur a dignissim lorem. Aenean quis congue justo..</p>

<template if:true={showBackToTop}>
<div class="container">
<span class="slds-badge slds-badge_inverse scrollToTopClass"
onclick={scrollToTop}>Scroll to top
<span class="slds-badge__icon slds-badge__icon_right slds-badge__icon_inverse">
<span class="slds-icon_container slds-current-color">
<lightning-icon icon-name="utility:arrowup"
size="xx-small"
alternative-text="Scroll to top">
</lightning-icon>
</span>
</span>
</span>
</div>
</template>
</div>
</template>

JavaScript
import { LightningElement } from "lwc";

export default class App extends LightningElement {
showBackToTop = false;
scrollToTop(){
let knowledgeWidgetElement = this.template.querySelector('.top-most-div')
knowledgeWidgetElement.scrollTop=0;
}

onScroll () {
let mydiv = this.template.querySelector('.top-most-div')
if (mydiv.scrollTop > 40) {
this.showBackToTop = true;
}
else {
this.showBackToTop = false;
}
}
}

CSS
.container{
display: flex;
justify-content: center;
height: 24px;
vertical-align: middle;
position: sticky;
position: -webkit-sticky;
bottom: 0;
overflow: hidden;
}
.scrollToTopClass {
background-color: #025316;
color: white;
font-weight: normal;
border-radius: 160px;
cursor: pointer;
}
.top-most-div{
overflow-y: scroll;
height:680px;
scroll-behavior: smooth;
}

Demo



Comments

Post a Comment

Popular posts from this blog

Image
Workspace API: How to get Record Id of Enclosing/Parent Tab Hi Folks,  I am back with another blog wherein I will discuss how to use Workspace API to get the Record Id of the Enclosing tab. (Basically the parent tab for the current subtab). Specifically in Salesforce Service Console apps when we click on any lookup value then that record's detail page opens in Subtab mode. For example when we click on Account Name from the Account Lookup field in the Case Record Page then we see that the Account Record Page is opened as a subtab under the current Case Record Page Situations can come where we want the Record Id for both the Account Id and the Case Id. We can easily get the AccountId via the recordId attribute. < aura:attribute name = "recordId" type = "Id" /> But how to get the CaseId, this value is present in the parent tab. This blog will give you the answer. Salesforce has provided Workspace API using which we can get this information out. We will dis...
Read more

Adding NPM module into LWC

Image
Importing NPM module into LWC Hi Folks, I am back with another post. This time I will be discussing the topic of how to add an NPM module into LWC. Although we all know that to make any 3rd party javascript work in Salesforce we need to have it into Static Resource. But I came into a strange situation wherein I had to use an npm module into LWC.  The issue that I was facing was that the NPM module was having several dependant files which were scattered into several folders and it would have taken me ages to read through all the codes, find the dependency and create a single JS file that is uploadable to static resource. After researching a lot got to know about the Browserify tool ( webpack is also there but browserify is easy to use). Using this tool you can just let the package know which JS file is the source file and  Browserify  will do the magic for you and create a single js file. Enough of talking. Now let's get to the technicalities with an example. :) I will d...
Read more