How can I add a "Scroll to top" button?

Site URL: https://www.logorado.com/

I want to add a "Scroll to top" button to my website.

Can you help me about how to create it?

Thanks.

Awesome! Thanks!

this code is not working in master page can u please give me another solution for this question

Doesn't work for me either. Button is placed correctly as I can see it if I delete display:none but when the java bit is inserted in the header injection point it doesn't work anymore :(

I've made some substantial changes to the answer, you wasn't seeing the widget because Hammadd forgot to link to the jQuery library, doh!

I've fixed the code formatting, made it clearer as to what goes where and included a working example too.

@neeklamy is there a way to not use a button image, and to just add text inside this box? Can it be added to the page code header script?

There is, in step 4, just change the text inside of the anchor from "Scroll" to whatever text link you would prefer.

Then all you need to do is adjust the CSS, resize the box width and height and remove the text-indenting and background. Something like this:

.scrollup {
 width: 60px;
 height: 40px;
 position: fixed;
 bottom: 50px;
 right: 100px;
 display: none;
}

@neeklamy thank you for that. Is there a way to turn off the text hover for this box only? The box shows correctly, but my text will only show when you hover over the box. I'm not sure how to fix that.

http://jeffreydowellphotography.com/blog/

@jddowell - You will need to set the regular state of the scrollup class. I've just copied the hover color, try adding this to your Custom CSS, .scrollup:

color: #7daed3;

So it should look something like:

.scrollup {
 width: 60px;
 height: 40px;
 position: fixed;
 bottom: 50px;
 right: 100px;
 display: none;
 color: #7daed3;
}

THANKY YOU!

@neeklamy (I made this into an arrow shape (from some css site) however I cant get my text to center over it. Here is what i added to make the triangle:

width: 0;   height: 0;   border-left: 80px solid transparent;  border-right: 80px solid transparent;  border-bottom: 80px solid #0076a9;

That's an interesting hack, re-adding the text-indent: -40px does so much, but beyond that I don't know, sorry.

I would be inclined to say that it would be simpler to draw an up arrow and make that the background.

ok, thank you :)

@neeklamy ok, so that css button wasnt working, so i added in a jpg

 background:url('http://static.squarespace.com/static/51ca14b0e4b014f2c6e0c3d8/t/52323f1de4b0c34b2a143a98/1379024669667/arrow%20small.jpg') no-repeat;

and it doesnt seem to be showing. The link loads by itself though, but its not showing behind the text.

A very simple solutions would be to add an anchor tag to the top of your page using two code blocks at the top and bottom of your page.

In the first code block you would paste:

<a name="scroll-to-top"></a>

At the bottom you would add a second code block for the button:

<a href="#scroll-to-top">Back to top</a>

Style to your needs and you are good to go for a very basic button. Please note it will only take your browser to the tag. On my site the header is a bit tall and was not visible when going back to the top of the site.

You can read this more in depth article on the topic: HTML Anchor Tag Tutorial

You don't need to add the first Code Block, all web browsers understand the # fragment as the top of the document. Just make that bottom Code Block:

<a href="#">Back to top</a>

How do I make this show only on specific pages? I would like to show only on the blog for example.

Using what neeklamy said, you can select Content Manager, select the blog page, select Blog Settings, then choose the Advanced tab. Scroll to the bottom and you'll see Post Blog Code Injection. Paste Back to top and it will put the words "Back to top" as a link at the end of every blog post/excerpt.

That's a horrible solution, why would I want to have more than 1 back to top buttons? I currently display 10 blog posts, I really don't want 10 back to top buttons.

Any solutions as to how to display this button like here: http://www.deephouseamsterdam.com/ ?

@vicorstan Consider an iPhone. Did you know that you can touch the very top of the browser window and go back to the top of any webpage from any location on the page? That means there are virtually an infinite # of "Back to top" buttons. If you're in the middle of the page, it's convenient to shoot back to the top without going all the way down first. But it's your site. Keep in mind you won't get much help with a bad attitude. I'm not looking for help; you are.

It's not my intention to exhibit any bad attitude, I was just letting you know that your solution is not feasible because it would spam the page with as many buttons as blog posts are showed which is not at all user/design friendly.

I did try a couple of methods both posted on this website and from other sources as well and none of them yields great results. I had issues with the Post Blog Code before and I'm trying to avoid using it because it tends to multiply any code placed there.

Is there any way where I can keep the scroll up button but add a "back to home" button on the left side of the page? I want it to show up in the same manner the "scroll to top" button is, I just don't know how to make it exist along side it.

So, essentially, I want both a "scroll to top" button and a "back to home" button to appear at the same time.

Is this possible?

Hey, those codes worked really great for me. Thanks everyone who contributed!

I was just wondering if there's a way to hide the button on mobile... Any clue?