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

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


logorado

Question

Recommended Posts

  • 0

If anyone comes across this post and is overwhelmed by the above (like me lol), I found an EASY step-by-step tutorial with screenshots here: https://thirtyeightvisuals.com/blog/back-to-top-button-squarespace

It doesn't actually say "Scroll to top" but it creates a nice, clean, floating button with an arrow and I actually preferred that.

It worked perfectly for my client's site on Moksha (Brine). :))

Link to comment
  • 0

Hi @logorado, I made a video tutorial for you on how to Add a scroll to top button. Hope this helps! https://www.askquesty.com/squarespace-answers/add-a-scroll-to-top-button-squarespace-tutorial

Have Squarespace questions/task and need help today? **You can hire us here.** Our answers are on-demand, video recorded, and only cost between $5 to $25. Estimates are free, 100% satisfaction guarantee, and trusted by hundreds of small businesses.

Link to comment
  • 0

Alternatively you can use anchor links....simply go to Settings >> Advanced >> Code Injection. Then in the header section add the following code:

<div id="ScrollUp"></div>

This simply labels the header div as "ScrollUp" so you can just refer to it using anchor links.

Now go to your footer, and either add a button or just a text that says something like "Go to top". Then in the links  section of either the button or just a hyperlink on the text (if that's what you used) then put the following in that links part:

#ScrollUP

Save and try it out! Should work. Let me know if any questions regarding this.

Cheers!

Link to comment
  • 0
On 3/8/2013 at 7:39 AM, HammaadM said:

 

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.

On 3/8/2013 at 7:39 AM, HammaadM said:

 

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.

This solution is very helpful!

However, it didn't work when I put on my site at first time, I spend a lot of time finding the problems and here are two points should be noticed: 

1. add a sentence: " z-index: 1!important;" into the CSS code! 

(Otherwise the button might only display on places that near the footer )

2. check the image url, make sure it is a full link like https://abc.com/s/button.jpg rather than /s/button.jpg!

Otherwise only if you open the CSS editor can you see the button

 

 

 

Link to comment

Create an account or sign in to comment

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

×
×
  • Create New...