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

http://www.scrolltotop.com/

Choose your button

1 copy the code2 paste to your site3 DONE!!

Html

:)

I found the solution to hiding the button on mobile. You have to code several scroll buttons in the CSS Editor, for different configurations as follows:

@media only screen and (max-width:3000px) {
 .scrollup {
   width: 60px;
   height: 40px;
   position: fixed;
   bottom: 50px;
   right: 100px;
   display: none;
 }
}

And then add these next two, but leave the brackets inside blank:

@media only screen and (max-width:480px) {}

This one works for slightly smaller screens like tablets or when the phone is landscape:

@media only screen and (max-width: 1000px) {}

Where do I host the icon_top.png?

You can host any additional files right inside the Custom CSS Editor Window. At the bottom right corner you will see two buttons, one of them says Custom Files (the one left to the Save button). Pressing it will open a side drawer and you simply drag and drop your files there.

To link the files place your typing cursor where you want to the link to be inserted and just click on the file you uploaded. The url is automatically inserted.

Hope this helps and let me know if you need more help!

Great ! That works just fine.Thanks a lot.

Guillaume

As HammaadM stated:

 <a href="#" class="scrollup">Scroll</a>

does the trick. However, I wanted to get my text to be centered, so I ended up adding some stuff to it and it ended like below:

<div style="text-align:center">    
 <a href="#">Back to Top</a>
</div>

When I look at the mobile end my icon is all the way to the left side when on desktop it's on the right hand side anyway to fix the alignment on mobile?

If I want the icon to be centered on the page in both desktop on mobile versions what CSS variants need to be changed?Right now with this code:

.scrollup { width: 40px; height: 40px; opacity: 0.9; bottom: 25px; left: px; position: fixed; z-index:100; display: none; background: url('http://static.squarespace.com/static/53e29465e4b09d387c666792/t/541f7527e4b02b592c3dbdfd/1411347751880/scrollarrow.png') no-repeat;}

It appears somewhat centered but slightly off to the right?

Question:

I inserted this <a href="#">Back to top</a> into my footer, and it works great. However, some users are reporting clicking it takes them back to the home/splash page, not the top of the page.

Thoughts on why it would work differently on different devices?

Thanks!

Could you post a link to the page where you’ve added this?

www.dnfw.squarespace.com

Again, all the pages work on my computer and mobile, but some don't work right on others computers/phones.

Thanks!

type FULL address for BLOGGER instead of just the '#':

example :

type FULL address for BLOGGER instead of just the '#':

Scroll

example : Scroll

Alright fellas! After researching for hours upon hours and scratching my head like mad, trying to get an icon to work without having to be a javascript wiz, here is the entire process completed in a single post (so easy a newbie can do it). Credit for the first half is given to those who came up with the coding in the first place! I just put all of the pieces together to make it extremely easy to add an icon for your scroll to top feature! Enjoy guys!!

Edit the Footer

1. Go to your site’s footer area
2. Add a Code Block
3. Make sure it’s set to HTML and the Display Source option isunchecked
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 and the ability to EASILY add icons carry on and follow 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: 60px; height: 40px; position: fixed; bottom: 50px; right: 100px; display: none; color: #7daed3;}Change the color to whatever you want!Page Header Code InjectionPaste 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>

Now to add an icon! Paste the following code into the section of your site's HTML. Settings > Advanced > Code Injection

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

Now go to the following link:

http://fortawesome.github.io/Font-Awesome/icons/

Scroll down until you see "Directional Icons". Click on an icon and Voila!

Now go back into your footer and replace "Scroll" with whatever coding was given to you - the coding should look something like this - example:

<i class="fa fa-arrow-circle-o-up"></i>

Once you have selected your icon and when all is said and done, the html code in the footer (referring to the code block you created a few steps back) should now look something like this:

<a href="#" class="scrollup"><i class="fa fa-arrow-circle-o-up"></i></a>

Now if you want to take it a step further and modify the size of the icon, follow the instructions on this page and look under the area titles larger icons:http://fortawesome.github.io/Font-Awesome/examples/

And there you have it, all put together to make you look like a pro in no time! :D

- Albert S. Hire me to create and design YOUR SquareSpace Website!

OneWayDesignStudios@Gmail.comwww.TheHealthyCo.com

HeathersBerto's answer is by far the best.

Just a small tip for those who are struggling to get the fontawesome icon on top of the hero images of some templates:

the z-index of those hero images is set to 99 by default, so just change your fontawesome CSS z-index to 100

for the scrolling function, What determines when it will be shown on the page?

I'm looking to adjust when it shows based on how far some scrolls down.,...

The above "hide scroll button on mobile" does not do anything. I am adding it to the "sitewide" custom css. Is there not a way to simply target the scroll button on mobile and choose display: none? There is no point in having a scroll to top on mobile as it's so easy to scroll, and it gets in the way of clickable links and verbage.

Thank you al

This answer makes no sense to me... can you please explain where to put the other two @media only screen lines? I need help with hiding on mobile, because a back to top is pointless on mobile

What does "codes several scroll buttons" mean? I have 1 image ('url') taking the place of the scroll up "black box", inserted into the custom css. I have the script in the code injection and the "class=scrollup code in the footer. it is functioning fine, I just need it hidden on mobile

http://www.godbyhearth.com/

This was so simple and easy! Thank you!

I got it to show up at the footer section of my website. Is there a simple way to get it to float dynamically while scroll through a blog post?

Hello everyone!

So I was able to get a button to show at the bottom of my site which is a great start. I used @Harjot solution which was getting a code from the following website and pasting it into the Code Injection Footer section: http://www.scrolltotop.com/

My question now is how to simply get the button to float dynamically in blog posts as users are reading instead of just at the bottom of the site.

Thanks a bunch everyone!Wish I took more coding class back in school haha

Hello everyone!

So I was able to get a button to show at the bottom of my site which is a great start. I used @Harjot solution which was getting a code from the following website and pasting it into the Code Injection Footer section: http://www.scrolltotop.com/

My question now is how to simply get the button to float dynamically in blog posts as users are reading instead of just at the bottom of the site.

Thanks a bunch everyone! Wish I took more coding class back in school haha

But there is still one thing that´s a problem...You have to type one line more in your head.

So that the complete Script part have to sound like this:

    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
   <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>

and than it should work ;D

Is there a way for me to apply this easily to all pages?

@expeditionjojo

I had great success with this solution and the scroll to top button appeared on every webpage just as I wanted it to, but I've recently lost the button. It no longer appears on my site. Have you experienced something similar?

~Jon

Hey @jonsolotravelsI removed it from my site for a while since I couldn't get it working the way I wanted it to. I'm trying to do it again now.

Any luck for you?