#sidebar help

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.

Now, look for your BODY area. It will look something like this body{

Then copy this code:

cursor: url(https://static.tumblr.com/obptcxj/QvHmo0l0g/cursor__6_.png), auto;

Also, there are some time that the cursor will change when you hover it over the links. Copy and paste the code over your links section also. It would look something like this a{ or a:hover{

Now, here's the surprising part. If you want to change the image of your cursor, use this code instead:

cursor: url(URL IMAGE OF YOUR CURSOR), auto;

Then, look for any cursor image you want it to be then copy and paste the link to the "URL IMAGE OF YOUR CURSOR", in between the parentheses. The URL should start with https:// for it to work. You may try searching at google or Pinterest with the cursor you want and change the url to it.

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.