Scroll to top button

If you scroll this page down, there will be an 'up-arrow' button emerging at the bottom right of the page. Clicking that button will take you back to the top. Quite useful if you have a 'one pager' or otherwise lots of contents on the same page.

This building block is relying on some java script placed in the footer section, and then there is some styling which cannot be done in the programme, it has to be added either as a separate css file or placed in the head section. I found it most convenient to add it to the head, and I kept a copy of it in a code editor to make various changes. Then I just pasted the code with the changes in, overwriting what I had from before. The number of pixels you want to have it scroll down before the button appears, can be edited in the first line of the java script.

While working in the programme you will see that html element at the top. That is holding the actual scroll button before it can be seen on the page. But in a browser it will not be visible before you want to see it.

It's best to save this as a theme to get all the code and script I mentioned. If you want to have it as a component, you need to take the lot (the 'wrapper' container), and just edit out the bits you don't need.

A mid-winter day in southern Norway.
The sun put in a rare appearance after weeks of hiding behind grey clouds.