Categories
Inspiration

Adding a Scroll to Top Button

You know those handy buttons that shoot you to the top of a page? Now you can make your own!

After much trial and error, I discovered how to add a “Scroll to Top” button, and I’m pretty excited! I really wish wordpress.com would add this as a regular feature bloggers could activate. But since they haven’t, I studied up on how to do it.

And I decided to share my fun discovery in case you’d like one on your blog! First off, here’s a button I made, which you can click to try!

The ideal thing would be to simply add such a button to your blog’s footer, but Button Widgets don’t exist on WordPress.com! Other ways of adding such a button require a plugin or javascript, which they aren’t allowed on this platform. So I’m going to tell you how to make your own button, find the html code for it, and insert that code into a Custom HTML Widget in your footer. Even if (like me) you don’t know HTML code too well!

Adding the button:

Because you will have to make the button and find its HTML code, I suggest doing it on an unpublished practice page to lessen the risk of publishing your trial runs!

  1. Add a Button Block to the page, following these instructions.
    • Type in what you’d like your button to say, something like Scroll to Top ↑.
    • Hyperlink your button to the top of the page by inserting "#top" into the url space where it says “search or type url.”
  2. Click on the three dots to the right of the Button Block toolbar and select “Edit as HTML.”
  3. Copy the code you see.
  4. Add a Custom HTML Widget to your footer, following these instructions.
  5. Copy the pasted code into the widget and save it.
  6. Publish your changes.

This won’t make a fancy, super fast, floating button that will alway display in the bottom corner of your blog, no matter where you’re at on the page. But it will scroll to the top of whatever page or post you’re reading, which can be pretty handy!

Enjoy!

Image by Free-Photos.

By Signora Sheila

I am a wife, mom, nonna, blogger, and missionary in Italy. But really, I'm just an ordinary woman on a journey, trying to slow down enough to hear the still small voice of God and live for all that is truly important in this world.

4 replies on “Adding a Scroll to Top Button”

I'd love to hear your thoughts!

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.