#theme kit

Full disclosure; I pulled the original JS code used here from this StackOverflow answer and modified it slightly to be a little easier to drop in place. It comes in two parts; one for the button itself, and one for the styles to make it all pretty however you like!

Button Code

First, you’ll want to figure out where you want to put your scroll to top button in your theme. I’d recommend putting it just inside your sidebar for most themes, but it’s really up to you. If you want to stick it in the corner of your page directly in the element that’s entirely up to you!

<script type="text/javascript" src="https://static.tumblr.com/au4xbaf/Pn3qdtfva/animated-scroll-to-top.js"></script> <!-- scrollToTop function arguments are: - the element you need to scroll - the duration of the animation. Some examples: - scroll whole window: scrollToTop(document.scrollingElement, 500); - scroll a container (select by ID): scrollToTop(document.getElementById('containerIdName'), 500); - scroll a container (select first thing with a class name): scrollToTop(document.getElementsByClassName('containerClass')[0], 500); --> <button role="Scroll to Top" id="scroll-top-button" onclick="scrollToTop(document.scrollingElement, 500)" >︽</button>

If you look at the <button> lines near the bottom, you'll see an onclick line. This is what you need to edit. You need to provide the scrollToTop() function with two bits of information:

What exactly it's supposed to scroll for you. (Page, container element, etc.)

How long (in milliseconds) you want it to take to reach the top.

Non-Container Themes

If your theme is not a container theme, you can usually just tell it to scroll the whole page (this is the first example in the code comments) by giving it document.scrollingElement as the thing in the to scroll.

Container Themes

If your theme is a container theme, you need to know some information about the container. Oftentimes you'll see the container element in your theme labelled class="container" or id="posts-container" or something along those lines, but not all theme creators play fair and name it something easy to find!

I'd recommend looking for {block:Posts} in your theme. The container element will generally be just above / before this token. You need something with an id or a class that you can reference (id is easier).

Locate container by ID

if you have an id on your container, awesome, that's the easiest way to go. You should see id="value", take that value and replace document.scrollingElement in the onclick line with document.getElementById('INSERT ID VALUE HERE'). When you're done that line should look something like this:

onclick="scrollToTop(document.getElementById('YOUR_ID')", 500)

Locate container by Class

If you have only a class="some classes" value on your container (each class is separated by a space), see if you can find the most unique one. Ctrl+F each class name if you must and try to find one that no other elements are using in their class="...". Then, add that class name into the onclick line as follows:

onclick="scrollToTop(document.getElementsByClassName('YOUR_CLASS')[0], 500)

Styles

Once you have your button element added in where you want it, you can look at adding some styles! This is the basic set of CSS blocks you'll need:

#scroll-top-button { background: transparent; color: rgb(200, 180, 50); text-shadow: 2px 2px rgb(125, 100, 20); transition: color 0.2s; font-size: 2em; font-family: 'Segoe UI', Consolas, sans-serif; border: none; padding: 0; } #scroll-top-button:hover { color: rgb(255, 255, 255); }