TL;DR: Use the code snippets from below and paste them into the text boxes "Custom <body> tracking code" and "Custom <head> tracking code" on page Dashboard >> Get Found (SEO). Customise as you like.
Having your website on Rocketspark makes it very easy to design and maintain your site. But there might be some features missing. One of them is adding a dynamic "Go to Top" button to all your pages that pops up when needed and hides automatically again. This is certainly useful if you don't have a sticky menu bar on top of the page, and the user needs to quickly go back up to the menu again.
What to do
We've taken the code snippets from W3Schools, adapted it to our design and to Rocketspark. The functionality consist of three parts:
The HTML of the button itself
The CSS for the appearance of the button
Adding the button
That's the markup of the button which needs to go into the text box "Custom <body> tracking code" on the page Dashboard >> Get Found (SEO), here:
The appearance of the button
Next up is the CSS which defines how the button looks like. We recommend adjusting this to the look of your website:
This needs to go into the text box "Custom <head> tracking code" on the page Dashboard >> Get Found (SEO), like that (wrap it around <style> tags, when not pasting it into ones which are there already):
Bringing it all to life
Thank you very much for reading. If you find this explanation useful please like and share.
Any question about your Rocketspark website? Don't hesitate to ask, we're here to help.
Photo by Andrew Charney on Unsplash