Back to Top

Scroll to top, Vanilla version

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 the easiest way to add it to the head, and for editing I kept a copy of it in a code editor. Then I just pasted the code with the changes, overwriting what I had from before. If you compare this version to the Foundation version, you will see differences (background color margins, padding). They have been edited that way. 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 a text link at the top left. That is a html element 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.

Placeholder Picture
Placeholder Picture

Mid-winter and short days, Southern Norway


Footer