Community

Scroll to top-button Arcgis Hub

941
2
11-26-2018 02:55 AM
Status: Open
ChristaKemperman1
by
New Contributor III

It would be nice to have the opportunity to add a "Go-to-top" button on Arcgis Hub pages. Especially long pages require a lot of scrolling; jumping to the top of the page with one quick click would be really user-friendly.

2 Comments
CharmaleeSandanayake1
by
‎07-21-2023 07:41 AM

There is a possible workaround that I saw used in this Peel Census Hub site and tried to replicate.

1) Add a Row to the bottom of the page

2) In the Row CSS Class, enter a class name such as fixed

3) Add a text element to the row

4) Edit the text in html and add similar code:

 

<style>
div.fixed {
position: fixed;
  bottom: 10px;
  right: 10px;
border: 1px solid white;
}
</style>

<div class="fixed">
  <calcite-button class="btn-solid" href="#Top">Back to Top</calcite-button></div>

 

5) Create or use an existing text element at the top on the page and add the following HTML code in the editor:

 

<a id="Top"></a>

 

 

asmith
by Esri Contributor
‎10-03-2023 07:02 AM

A slightly faster adaptation of @CharmaleeSandanayake1's way is to set href="#" in the button. Then you don't need to worry about creating an id at the top of the page like in their step 5.

You can put the button directly beside your text too, I have mine to the right of my headers so the user can go to the top from several points along the way. I'm using a Bootstrap svg icon so everything between the <a> tags is directly from there. My .pageButton styling is just to make sure it is far enough away from other content, you probably don't need to copy that part.

<style>
  .pageButton {
    margin:0.5em;
  }
</style>

<a class="pageButton" href="#" style="float:right;">
  <svg xmlns='http://www.w3.org/2000/svg' width='30' height='30' fill='currentColor' class='bi bi-arrow-up-circle' viewBox='0 0 16 16'>
    <path fill-rule='evenodd' d='M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8zm15 0A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-7.5 3.5a.5.5 0 0 1-1 0V5.707L5.354 7.854a.5.5 0 1 1-.708-.708l3-3a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 5.707V11.5z'></path>
  </svg>
</a>
<h1>header text</h1>
<p>
  paragraph text
</p>