A button to scroll at the top of the page in LWC

Question

Below Playground I have code with the button to scroll at the top of the page and conditionally render the button when user scrolled down. Now if I remove the custom render thing then button works as expected but when I add the custom css for conditional rendering then button stopped working,

Playground

On above playground when you scroll down, a button will appear at the bottom left but when you click on it won't scroll at the top.

Answer 1

You can even use window.scrollTo option, if you want to scroll till top.

topFunction(){
    const scrollOptions = {
        left: 0,
        top: 0,
        behavior: 'smooth'
    }
    window.scrollTo(scrollOptions);
}

HTML (add this at end):

<lightning-button-icon icon-name="utility:arrowup" class="topButton" onclick={topFunction}
                       variant="brand" alternative-text="ArrowUp">
</lightning-button-icon>

CSS:

.topButton {
    position: fixed;
    bottom: 20px;
    right: 30px;
    z-index: 99;
    font-size: 18px;
    border: none;
    outline: none;
    cursor: pointer;
    border-radius: 4px;
}

.topButton:hover {
    background-color: #555;
}

Answer 2

add this in goToTop function remove everything else

  this.template.querySelector('.test').scrollTop=0;

and in the html class assign class name test like

<div class='test' style="overflow: auto; position: fixed; top: 0; left: 0; right: 0; bottom: 0; " onscroll={onScroll}> 

Answer 3

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