This tutorial explains how to display buttons allowing users to move directly to the bottom or to the top of the site.   Xtreme includes two clickable Anchors to navigate up and down your site. There is one at the top of the page and one at the bottom, but these are hidden by default.   If you want to make these Anchors visible, so they can be used by your visitors, you can simply add the rule below in the theme CSS rule box located in: - Legacy Admin > Main options > Fonts & Custom > Custom CSS Rule box - or Customize > Custom CSS > Global CSS Rule box  

#page-top, #page-bottom {display:block;}

  These anchors are simple up and down arrows and are on their own line.   If you want to style them, you can add dedicated Custom CSS rules for each of them   For example, if you want the top anchor to be over the header image and in the shape of a button, you could add the rule below to the Global Custom CSS rule box (In addition to the previous one)  

#page-top {
position:absolute;
z-index:10000;
background-color:white;
text-align:center;
border-radius:5px;
border:2px solid black;
margin:10px;
}

  If you do not like the Up and Down arrows, or want them to be/go in/to a different locations, you will need to insert your own HTML in the locations of your choosing.   The HTML for your custom Top Anchor would look like:

<a id=”my-page-top” href=”#my-page-bottom”>Go to Bottom </a>

  If you want the button to be an icon instead of text, place an image tag in lieu of the text like below

<a id=”my-page-top” href=”#my-page-bottom”> <img src="ImageUrl" /> </a>

  The HTML for your custom Bottom Anchor would look like:

<a id=”my-page-bottom” href=”#my-page-top”>Go to Top</a>

  Where you insert this HTML is up to you, but if you want the "Go to Bottom" to be a button over the header image, you could for example insert that HTML in the Header HTML Area found in: - Legacy Admin > Main options > Header > Header HTML > Header HTML content box - or Customize > Added Content > Site Header > Header HTML   Then to make the Top Anchor into a button and move it over the header image, you would put the CSS below in the Header HTML CSS Rule box, located in: - Legacy Admin > Main options > Header > Header HTML > Header HTML BG CSS+ box - or Customize > Custom CSS > Header Area > Header Area Header HTML Custom CSS  

{position:absolute;top:100px;left:20px;width:100px;
border-radius:5px;border:2px solid black;text-align:center;}

  The above CSS moves the Header HTML over the Header Image using position absolute, and styles the area with background-color, border, width and text alignment. You can change that to reflect whatever styling you need for it.