Need to enable the scroll to top Button on Employee center portal

vinodvinu12
Giga Contributor

4 weeks ago

Hi All, 

 

Need suggestions on enabling the Scroll to top on employee center portal in servicenow. 

What is the best way to enable this functionality on the portal. 

Can this be only applied to any specific pages or can we add it across all the pages on the employee center portal.

 

Any reference will ne helpful. 

Thanks.

0 Helpfuls
  • 180 Views
1 REPLY 1

Community Alums
Not applicable

3 weeks ago - last edited 3 weeks ago

Hi @vinodvinu12,

 

To enable the Scroll to Top functionality on the Employee Center portal, follow the steps below:

  1. Navigate to Service Portal > Service Portal Configuration.

  2. From the Service Portal Configuration page, open the Widget Editor.

    MIftikhar_0-1760698644632.png

  3. In the Widget Editor, search for the out-of-the-box widget named ‘SC Scroll to top’ and open it.

    MIftikhar_1-1760698689252.png

  4. From the hamburger menu (☰) in the widget editor, select Clone 'SC Scroll to top' to create a custom version.

    • Set Widget Name: ESC Scroll to top

    • Click Submit.

  5. Update the HTML and CSS of the cloned widget as follows:

IN HTML:
Remove the responsive visibility classes (visible-xs visible-sm) from the button.

<div class="button-to-top-wrapper">
  <button name="gotoTop" ng-click="goTop()" class="btn fa fa-arrow-up fa-lg padder-lg button-to-top pull-right" data-toggle="tooltip" data-placement="top" title="{{c.data.scrollButtonLabel}}"></button>
</div>

IN CSS:

Comment out the z-index: 1; in the .button-to-top class to avoid layering issues.

@media only screen and (max-width: 992px) {
  .button-to-top-wrapper {
    position: relative;
    
    .button-to-top {
      position: fixed;
      bottom: 0;
      right: 0;
      margin-right: 15px;
      margin-bottom: 15px;
      border-radius: 5px !important;
      opacity: 0.7 !important;
      padding: 12px !important;
      border: 1px solid !important;
      width: 47px;
      height: 45px;
      background-color: #ddd;
      // z-index: 1;
    } 
  }
}

       6. Save the widget and add it to your ESC portal pages.


For example, I have added it to the following pages:

  • Employee Center Homepage (ec_standard_home)

  • Catalogs Page (esc_sc_category)

MIftikhar_2-1760699317426.png
MIftikhar_3-1760699439863.png

MIftikhar_4-1760699525669.png

 

If my response helped, please mark it as the accepted solution so others can benefit as well.

 

0 Helpfuls