> ## Content Index
> Fetch the complete content index at: https://blog.lsonline.fr/llms.txt
> Use this file to discover other available public pages before exploring further.

# A scroll back to top SPFx extension for SharePoint
- URL: https://blog.lsonline.fr/2020/02/27/a-scroll-back-to-top-spfx-extension-for-sharepoint/
- Published: 2020-02-27T20:57:02.000Z
- Updated: 2026-01-27T18:53:39.000Z
- Description: Help your end users to adopt SharePoint by adding a button to allow them to return to the top of the page, thanks to an SPFx extension
- Author: Laurent Sittler
- Tags: SharePoint Framework, SharePoint, Modern Experience, Development

By having some SharePoint modern pages with a lot of content, you can make it easier for your final users by adding a button that allows them to go back to the top of the page easier

![](https://blog.lsonline.fr/content/images/2020/02/LsOnline-SPFx-ScrollToTop.gif)

Scroll To Top demo

## How to install this extension

If you want to install this extension for all site collections of your Tenant, the easiest way is to deploy it into your Tenant App Catalog directly.

You can just add the extension with a *drag & drop* of the [package](https://gitlab.lsonline.fr/SharePoint/sp-dev-fx-webparts/scrollToTop/-/releases?ref=blog.lsonline.fr) `.sppkg` into the **Apps for SharePoint** library or by clicking on **Upload**.

Once done, a modal will appear to deploy the package. If you want to deploy and enable the extension for all sites collections in your Tenant, check the case *"Make this solution available to all sites in the organization"* and click **Deploy**

![](https://blog.lsonline.fr/content/images/2020/02/LsOnline-ScrollToTop-DeploySPModal.jpg)

SharePoint modal to deploy package from App Catalog

Once deployed for all sites, you can go on whatever sites collection and you should see something like this:

![](https://blog.lsonline.fr/content/images/2020/02/LsOnline-ScrollToTop-DefaultConfigResult.jpg)

Default scroll to top

If the default configuration is not what you want, you can change:

- The shape (`square` or `circle`)
- The UI Fabric icon
- The duration of scrolling to the top of the page

> \[note\]**Note**  
>  
> The button use the primary color of the site theme

If you wish to edit the configuration, you have to go to the "Tenant Wide Extensions" list located in your Tenant Apps Catalog (only available on the Tenant Apps Catalog)

![](https://blog.lsonline.fr/content/images/2020/02/LsOnline-ScrollToTop-AppsCatalogSiteContent.jpg)

SharePoint Tenant Wide Extensions list located into the Tenant Apps Catalog

Find the item with the `Component Id` equals at `ba2540fe-8c92-4b95-99fb-04b074c82b13`:

![](https://blog.lsonline.fr/content/images/2020/02/LsOnline-ScrollToTop-EditTenantWideExtItem-1.jpg)

SharePoint Tenant Wide Extensions list items

Edit the `Component Properties` of the item like this (for example):

```JSON
{"scrollDuration":null,"buttonIcon":"Up","shape":"circle"}
```

Example of custom configuration

Save the item and go on whatever sites collection and you should see something like this:

![](https://blog.lsonline.fr/content/images/2020/02/LsOnline-ScrollToTop-CustomConfigResult.jpg)

Custom scroll to top

---

If you want to deploy this extension only on one or several specific site collections, you have to enable a Site Collection Apps Catalog on each of them. Then, I suggest you use the provided setup scripts available in the repository.  
  
[ ![](https://blog.lsonline.fr/content/images/2021/01/gitlab-white-64.png) Scroll to Top repository ](https://gitlab.lsonline.fr/SharePoint/sp-dev-fx-webparts/scrollToTop?ref=blog.lsonline.fr)
  
  
Hoping this post will help you ?