Jump to content

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

Go to solution Solved by HammaadM,

Recommended Posts

  • Solution

Edit the Footer

  1. Go to your site’s footer area – see How do I add content to the Footer of my site?
  2. Add a Code Block
  3. Make sure it’s set to HTML and the Display Source option is unchecked
  4. Add this code: <a href="#" class="scrollup">Scroll</a>

If you don’t want any animation just leave it at this, but if you want some fading animation carry on following along!

CSS Editor

Go to the CSS Editor – to see how to get to it, take a look at Using the CSS Editor.

Paste in the following:


.scrollup {
 width: 40px;
 height: 40px;
 opacity: 0.3;
 position: fixed;
 bottom: 50px;
 right: 100px;
 display: none;
 text-indent: -9999px;
 background: url('icon_top.png') no-repeat;
}

Replace icon_top.png with your scroll up button and you can mess with the exact positioning with the values for right and bottom i.e. increasing the value for right to 110px will mean the icon will be 110px from the right edge of the screen.

Page Header Code Injection

Paste this into your site’s Page Header Code Injection, for how to get to it see the article Using Code Injection:


<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script>
 $(document).ready(function () {
     $(window).scroll(function () {
         if ($(this).scrollTop() > 100) {
             $('.scrollup').fadeIn();
         } else {
             $('.scrollup').fadeOut();
         }
     });
     $('.scrollup').click(function () {
         $("html, body").animate({
             scrollTop: 0
         }, 600);
         return false;
     });
 });
</script>


Working Example

You can see it in action in this JSFiddle – Scroll to top.

Hope this helps.

Edited by HammaadM
Improve formatting, use curly quotes

Currently working on creating a new A.I Assistant - Ordr.ai ----------------------------------------

Link to comment
  • 3 months later...
  • 2 months later...

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.

The name is an Anglicised form of the Greek Korvetti — I like to think there’s a little bit of the ancient Hellenic drive in me.

Link to comment
  • 3 weeks later...

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;
}

The name is an Anglicised form of the Greek Korvetti — I like to think there’s a little bit of the ancient Hellenic drive in me.

Link to comment

@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;
}

The name is an Anglicised form of the Greek Korvetti — I like to think there’s a little bit of the ancient Hellenic drive in me.

Link to comment

@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;

Edited by Guest
Link to comment

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.

The name is an Anglicised form of the Greek Korvetti — I like to think there’s a little bit of the ancient Hellenic drive in me.

Link to comment

@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.

Edited by Guest
Link to comment

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

Edited by CameraNerd81
Link to comment

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>

Edited by neeklamy

The name is an Anglicised form of the Greek Korvetti — I like to think there’s a little bit of the ancient Hellenic drive in me.

Link to comment
  • 5 months later...
  • 3 weeks later...

@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.

Link to comment

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.

Link to comment
  • 1 month later...

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?

Link to comment
  • 2 weeks later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.