Scrolling back to the top of a long form or an article can feel like a hassle, especially after making your way deep into the content. Manually swiping or dragging the scroll bar takes time and can be frustrating. That’s why many websites include a “Scroll to Top” button, a simple, one-click solution that instantly takes you back to the top, making navigation smoother and more convenient.

In this article, we’ll show you how to create your own custom “Scroll to Top” button in Oracle Visual Builder which will appear if the page has a scroll down and it will automatically disappear if there is no vertical scroll in the page. This Scroll Top button will help you improve your app’s usability and user experience.

The following are the steps:

Suppose we have an input form and you want a Scroll Top button below this form.

Create a <div> at the end of the form. Under that div create two divs giving the first div a column length of 11 columns and the second div a column length of 1 column.
Now go to the Page Designer section, drag and drop the Button component from the Components pallet to the design area under the second div, as shown in the image below.
Give this button a custom class “showHideBtn”. Also give a title Scroll to Top under the Properties panel so that whenever someone hovers on the button, it will show Scroll to Top as help text. Also, provide chroming as borderless and you can provide some custom styling as per your application’s UI.
Now under the <oj-button>, create a <span></span> and give this span a class “oj-ux-ico-arrow-inline-up”. This class will show an arrow-up⬆️ icon in the <oj-button> which will depict to go up. You can provide custom styling as per your needs.
Now we will write the custom CSS for showHideBtn class which we have given to the oj-button component. So click on the Web Application icon on the top-right side of the VBCS console. Then expand the Resources folder. Under Resources, expand CSS folder and click on app.css file. Write the custom CSS here in this file as shown below.

.showHideBtn{
  display: none;
} 

//This CSS will kept Scroll Top button disable initially until no scroll down happens.

Now we will add the Scroll Top button’s appear and disappear logic under the Javascript section of the VBCS page console.
- ```
// custom event to trigger scroll. If vertical scroll bar is there, show ScrollToTop btn

    window.addEventListener('scroll', ()=>{
      const button = document.querySelector(".showHideBtn");
      if(window.scrollY === 0){
        button.style.display = 'none';
      }else{
        button.style.display = 'block';
      }
    });
```
  The above function will add a scroll event listener on the scroll-top page. This event will trigger when anyone scrolls down the page and it will change the display property of the Scroll Top button. If a vertical scroll is there (means scrollY is not 0), the event listener will make the button’s display property as ‘block’ through which button appears in the bottom right of the page, and if the vertical scroll is 0 (means scrollY = 0) then display property of button will be set to ‘none’ and button will disappear from the bottom.
Now you have to add the click event on the Scroll Top button which will push the vertical scroll bar to the top of the page. So for that,
Go to the Page Designer section, click on the Design button, and then click on the Scroll Top button. Now click on the Events tab under the Properties panel on the right side, click on + Event Listener, and select On ‘ojAction’ as the event listener. This will open the ButtonActionChain action chain.
Again go to the Javascript section of the VBCS page console. Add the below-formatted function under the class PageModule code block.
- ```
// scroll to top function

    scrollToTop(){
      window.scrollTo({ top: 0, behavior: 'smooth' }); // Smooth scroll to top
    }
```
- The above scrollToTop() function will smoothly push the vertical scroll bar to the top of the page.
Now go to the Action Chains tab and open ButtonActionChain. Drag and drop the Call Function component for the Actions pallet to the ButtonActionChain canvas and select the scrollToTop function from the LOV of the Function Name field on the right side under the Properties pallet.