#top button

[girlsinpolos]

[whereinmnl]

HOW TO: ADD A SCROLL TO TOP BUTTON

Tired of scrolling back up when you've hit the bottom of your blog?

Here is a quick guide on how to add a cute, floating scroll-to-top button to your Tumblr theme. It fades in when you scroll down and glides smoothly back to the top when clicked!

The best part? You only need to copy and paste one thing.

The Step-by-Step

Go to Edit Appearance > Edit Theme > Edit HTML.

Click inside the code box and press Ctrl+F (or Cmd+F on Mac).

Search for (it is usually at the very bottom).

Paste the code below right before the tag.

Update Preview and Save!

The Code

(Copy everything in this box!)

<style> /* --- THE STYLING --- */ #scrollToTopBtn { position: fixed; bottom: 30px; right: 30px; z-index: 999999; /* Sits on top of everything */ border: none; outline: none; background-color: {color:Post Background}; /* Matches your post color */ cursor: pointer; padding: 12px; border-radius: 50%; opacity: 0; /* Hidden by default */ pointer-events: none; transition: opacity 0.4s, transform 0.2s; box-shadow: 0 4px 15px rgba(0,0,0,0.15); border: 1px solid {color:Borders}; } #scrollToTopBtn.show { opacity: 1; pointer-events: auto; } #scrollToTopBtn:hover { transform: translateY(-5px); /* Cute hop effect */ } /* The Icon Settings */ #scrollToTopBtn img { width: 20px; /* Size of the icon */ height: auto; display: block; /* filter: invert(1); <--- UNCOMMENT THIS LINE if you need a white icon! */ } </style> <div id="scrollToTopBtn" onclick="scrollToTop()"> <img src="https://static.tumblr.com/obptcxj/p59mo0l0s/pin.png" alt="Scroll to Top"> </div> <script> var mybutton = document.getElementById("scrollToTopBtn"); // Show button when scrolling down 100px window.onscroll = function() {scrollFunction()}; function scrollFunction() { if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) { mybutton.classList.add("show"); } else { mybutton.classList.remove("show"); } } // Smooth scroll to top function function scrollToTop() { window.scrollTo({top: 0, behavior: 'smooth'}); } </script>

How to Customize

Change the Icon: Look for the line that starts with <img src="…. Replace the URL inside the quotes with any image URL you like!

Change the Color: If your icon is black but your theme is dark, find /* filter: invert(1); … / in the CSS section and remove the / and */ to turn the icon white.

Change the Position: In the CSS section, change bottom: 30px; or right: 30px; to move it around.

It would look super cute on your blog… and even cuter if you tagged me in the caption. Just saying. 👀

[preppie22]

Loves to Pop

[shirtandties]

Tumblr sucks right, so go back to You Tube

[noface-nostyle]

Heading to the bar tonight

[themancorialist]

Saint Ann’s Square, Manchester.

[girlsinpolos]

lulurulesok

[whereinmnl]

HOW TO MAKE CUSTOM SCROLLBAR

This is the code I used for my personal blog:

::-webkit-scrollbar { width: 10px; background: #000000; } ::-webkit-scrollbar-thumb { background: #458eff; border-radius: 5px; }

Now, if you want to change it. Go to your CSS, or find this in your HTML <style> / <style type=css""> and copy paste the code above.

::-webkit-scrollbar { (THIS IS FOR STYLE OF THE SCROLLBAR ITSELF) width: 10px; (HOW THICK YOU WANT IT TO BE) background: #000000; (THE BACKGROUND OF THE SCROLLBAR) }

::-webkit-scrollbar-thumb { background: #458eff; (THE COLOR OF THE SCROLLBAR) border-radius: 5px; (HOW CIRCLE YOU WANT YOUR SCROLLBAR TO LOOK LIKE) }

You can use this website for the color codes.

Disclaimer: The code is not mine, I just heavily tweaked it from the owner.