Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 8
logorado

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

Question

Recommended Posts

  • 15

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

Share this post


Link to post
  • 3

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

Share this post


Link to post
  • 3

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.

Share this post


Link to post
  • 2

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?


www.danielconz.com

Share this post


Link to post
  • 2

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) {}

Edited by aquaria527
Format code

Share this post


Link to post
  • 2

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

Edited by HeathersBerto

Share this post


Link to post
  • 1

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.

Share this post


Link to post
  • 1

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.

Share this post


Link to post
  • 1

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

Share this post


Link to post
  • 1

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.

Share this post


Link to post
  • 1

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

Share this post


Link to post
  • 1

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!

Edited by victorstan

Share this post


Link to post
  • 1

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!

Edited by scottgreider

Share this post


Link to post
  • 1

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


Los Angeles SEO Expert & Content Strategist helping small business and e-commerce companies create website experiences that customers love. Free Contact me for a free consultation.

Share this post


Link to post
  • 0

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

Share this post


Link to post

Create an account or sign in to comment

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


×
×
  • Create New...