How can I create a bouncing down arrow?

Yo Dawg,

You can use CSS to achieve this:

le CSS

 .bounce {
  position:fixed;
  left:50%;
  bottom:0;
  margin-top:-25px;
  margin-left:-25px;
  height:50px;
  width:50px;
  background:red;
  -webkit-animation:bounce 1s infinite;
  -moz-animation:bounce 1s infinite;
  -o-animation:bounce 1s infinite;
  animation:bounce 1s infinite;

}

@-webkit-keyframes bounce {
  0%       { bottom:0px; }
  50%      { bottom:15px; }
  100%     {bottom:30;}
}

 @-moz-keyframes bounce {
  0%       { bottom:0px; }
  50%      { bottom:15px; }
  100%     {bottom:30;}
}

 @-o-keyframes bounce {
  0%       { bottom:0px; }
  50%      { bottom:15px; }
  100%     {bottom:30;}
}

 @keyframes bounce {
  0%       { bottom:0px; }
  50%      { bottom:15px; }
  100%     {bottom:30;}
}

le HTML

<div class="bounce"></div>

Currently it's a red square, however you can use a background-image of an arrow instead.

I was trying this out in 7.1.

I have a full height banner and wanted to see if i could get this scroll arrow to take me to the next section on click.  I had to make a couple of adjustments to get it to work.

1. I put in a code block under my last element on the banner section. But instead of using a <div> i used <a>

<a href="#first-section" class="bounce"></a>

2. I then went to the second section underneath (where i want the user to go to) and put in a code block and entered a blank <div> with an id to act as an anchor.  

<div id="first-section"></div>

3. I had to adjust the css very slightly to include a background image which is a transparent white arrow and then to prevent the image distorting added the background size property.

<style>
.bounce {
  position:fixed;
  left:50%;
  bottom:0;
  margin-top:-25px;
  margin-left:-25px;
  height:50px;
  width:50px;
background: url('https://static1.squarespace.com/static/5e78f290575a6321739eba41/t/5ec8625c6dad0e25fa5a8234/1590190684880/Arrow.png');
  background-size: 100% auto;
  -webkit-animation:bounce 1s infinite;
  -moz-animation:bounce 1s infinite;
  -o-animation:bounce 1s infinite;
  animation:bounce 1s infinite;

}

@-webkit-keyframes bounce {
  0%       { bottom:0px; }
  50%      { bottom:15px; }
  100%     {bottom:30;}
}

 @-moz-keyframes bounce {
  0%       { bottom:0px; }
  50%      { bottom:15px; }
  100%     {bottom:30;}
}

 @-o-keyframes bounce {
  0%       { bottom:0px; }
  50%      { bottom:15px; }
  100%     {bottom:30;}
}

 @keyframes bounce {
  0%       { bottom:0px; }
  50%      { bottom:15px; }
  100%     {bottom:30;}
}

</style>

4. Lastly i didn't like the way that it just jumped to the next section.  I wanted a smooth scroll effect.  I found the following javascript which i injected into the site header under Settings > Advanced > Code Injection.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  // Add smooth scrolling to all links
  $("a").on('click', function(event) {

    // Make sure this.hash has a value before overriding default behavior
    if (this.attributes.href.value.substr(0, 1) === '#') {
      // Prevent default anchor click behavior
      event.preventDefault();

      // Store hash
      var hash = this.hash;

      // Using jQuery's animate() method to add smooth page scroll
      // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 800, function(){
   
        // Add hash (#) to URL when done scrolling (default click behavior)
        window.location.hash = hash;
      });
    } // End if
  });
});
</script>

5. It doesn't look great on mobile, and i figured that most people are used to scrolling on mobile and tablet anyway.  So i also added a media query to disable on mobile and smaller screens.

@media only screen and (max-width: 1023px) {
  .bounce {
    display: none;
  }
}

6. I found that the arrow was displaying in the footer section too which was annoying.  After much searching i put this code into the header section which solved the issue.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>
$(window).scroll(function() {
    if ($(this).scrollTop()>300)
     {
        $('.bounce').hide(1000);
     }
    else
     {
      $('.bounce').show(1000);
     }
 });
</script>

Hope this helps.

@YoDawg -- thanks so much for this....

And how would I make it an arrow?

PS- Just tried it --- but doesn't seem to work in Firefox...

I've gone ahead and updated the code to include vendor prefixes.

Can anyone walk me through actually using this code on my landing page? I'm trying to copy and paste but its not working. I'm not a very savvy code user so a very simple explanation would be awesome. This is exactly the answet to what I need on my site as well...arrow to scroll down

The code is working! Is there a way to get this bouncing arrow on a specific page? For example on the Squarespace homepage.

The code is working! Is there a way to get this bouncing arrow on a specific page? For example like displayed on the Squarespace homepage.

In the design section of your site click on the CSS Editor and that's where you add the code. I had to add this in front of the code above to make it work: .parallax-item .scroll-arrow,I had seen that in someone else's code and it allowed my arrow to start moving. Before that the code was not doing anything. Then I changed the background color to "none" and the red block behind the arrow disappeared.

On 5/22/2020 at 5:23 PM, neilfossett said:

I was trying this out in 7.1.

I have a full height banner and wanted to see if i could get this scroll arrow to take me to the next section on click.  I had to make a couple of adjustments to get it to work.

1. I put in a code block under my last element on the banner section. But instead of using a <div> i used <a>

<a href="#first-section" class="bounce"></a>

2. I then went to the second section underneath (where i want the user to go to) and put in a code block and entered a blank <div> with an id to act as an anchor.  

<div id="first-section"></div>

3. I had to adjust the css very slightly to include a background image which is a transparent white arrow and then to prevent the image distorting added the background size property.

<style>
.bounce {
  position:fixed;
  left:50%;
  bottom:0;
  margin-top:-25px;
  margin-left:-25px;
  height:50px;
  width:50px;
background: url('https://static1.squarespace.com/static/5e78f290575a6321739eba41/t/5ec8625c6dad0e25fa5a8234/1590190684880/Arrow.png');
  background-size: 100% auto;
  -webkit-animation:bounce 1s infinite;
  -moz-animation:bounce 1s infinite;
  -o-animation:bounce 1s infinite;
  animation:bounce 1s infinite;

}

@-webkit-keyframes bounce {
  0%       { bottom:0px; }
  50%      { bottom:15px; }
  100%     {bottom:30;}
}

 @-moz-keyframes bounce {
  0%       { bottom:0px; }
  50%      { bottom:15px; }
  100%     {bottom:30;}
}

 @-o-keyframes bounce {
  0%       { bottom:0px; }
  50%      { bottom:15px; }
  100%     {bottom:30;}
}

 @keyframes bounce {
  0%       { bottom:0px; }
  50%      { bottom:15px; }
  100%     {bottom:30;}
}

</style>

4. Lastly i didn't like the way that it just jumped to the next section.  I wanted a smooth scroll effect.  I found the following javascript which i injected into the site header under Settings > Advanced > Code Injection.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  // Add smooth scrolling to all links
  $("a").on('click', function(event) {

    // Make sure this.hash has a value before overriding default behavior
    if (this.attributes.href.value.substr(0, 1) === '#') {
      // Prevent default anchor click behavior
      event.preventDefault();

      // Store hash
      var hash = this.hash;

      // Using jQuery's animate() method to add smooth page scroll
      // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 800, function(){
   
        // Add hash (#) to URL when done scrolling (default click behavior)
        window.location.hash = hash;
      });
    } // End if
  });
});
</script>

5. It doesn't look great on mobile, and i figured that most people are used to scrolling on mobile and tablet anyway.  So i also added a media query to disable on mobile and smaller screens.

@media only screen and (max-width: 1023px) {
  .bounce {
    display: none;
  }
}

 

6. I found that the arrow was displaying in the footer section too which was annoying.  After much searching i put this code into the header section which solved the issue.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>
$(window).scroll(function() {
    if ($(this).scrollTop()>300)
     {
        $('.bounce').hide(1000);
     }
    else
     {
      $('.bounce').show(1000);
     }
 });
</script>

Hope this helps.

The arrow works great but i cannot get it to be clickable. Is this b/c I am using an index?

Clickable to move down the site  is a very different thing. If that is what you want then you need to use anchor points. Link at the top, an arrow if you wish, target placed down the page. 

https://support.squarespace.com/hc/en-us/articles/207135178-Creating-anchor-link

jfranklin45

I've not tried this on SQS 7.0 with an index page.

However step 1 and step 2 make sure the href #xyz matches the div ID in step 2 div id='xyz'.  Also make sure that the divID in step 2 is unique.  You cannot repeat ID's on the same page.

Hope you got it working.

On 5/22/2020 at 8:23 PM, neilfossett said:

I was trying this out in 7.1.

I have a full height banner and wanted to see if i could get this scroll arrow to take me to the next section on click.  I had to make a couple of adjustments to get it to work.

1. I put in a code block under my last element on the banner section. But instead of using a <div> i used <a>

<a href="#first-section" class="bounce"></a>

2. I then went to the second section underneath (where i want the user to go to) and put in a code block and entered a blank <div> with an id to act as an anchor.  

<div id="first-section"></div>

3. I had to adjust the css very slightly to include a background image which is a transparent white arrow and then to prevent the image distorting added the background size property.

<style>
.bounce {
  position:fixed;
  left:50%;
  bottom:0;
  margin-top:-25px;
  margin-left:-25px;
  height:50px;
  width:50px;
background: url('https://static1.squarespace.com/static/5e78f290575a6321739eba41/t/5ec8625c6dad0e25fa5a8234/1590190684880/Arrow.png');
  background-size: 100% auto;
  -webkit-animation:bounce 1s infinite;
  -moz-animation:bounce 1s infinite;
  -o-animation:bounce 1s infinite;
  animation:bounce 1s infinite;

}

@-webkit-keyframes bounce {
  0%       { bottom:0px; }
  50%      { bottom:15px; }
  100%     {bottom:30;}
}

 @-moz-keyframes bounce {
  0%       { bottom:0px; }
  50%      { bottom:15px; }
  100%     {bottom:30;}
}

 @-o-keyframes bounce {
  0%       { bottom:0px; }
  50%      { bottom:15px; }
  100%     {bottom:30;}
}

 @keyframes bounce {
  0%       { bottom:0px; }
  50%      { bottom:15px; }
  100%     {bottom:30;}
}

</style>

4. Lastly i didn't like the way that it just jumped to the next section.  I wanted a smooth scroll effect.  I found the following javascript which i injected into the site header under Settings > Advanced > Code Injection.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  // Add smooth scrolling to all links
  $("a").on('click', function(event) {

    // Make sure this.hash has a value before overriding default behavior
    if (this.attributes.href.value.substr(0, 1) === '#') {
      // Prevent default anchor click behavior
      event.preventDefault();

      // Store hash
      var hash = this.hash;

      // Using jQuery's animate() method to add smooth page scroll
      // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 800, function(){
   
        // Add hash (#) to URL when done scrolling (default click behavior)
        window.location.hash = hash;
      });
    } // End if
  });
});
</script>

5. It doesn't look great on mobile, and i figured that most people are used to scrolling on mobile and tablet anyway.  So i also added a media query to disable on mobile and smaller screens.

@media only screen and (max-width: 1023px) {
  .bounce {
    display: none;
  }
}

 

6. I found that the arrow was displaying in the footer section too which was annoying.  After much searching i put this code into the header section which solved the issue.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>
$(window).scroll(function() {
    if ($(this).scrollTop()>300)
     {
        $('.bounce').hide(1000);
     }
    else
     {
      $('.bounce').show(1000);
     }
 });
</script>

Hope this helps.

I'm new to squarespace and didn't realize I was using 7.1 instead of 7.0. I found a bunch of tutorials to add scroll hint arrows but none of them worked for me in 7.1.... After following your instructions your scroll arrow worked perfectly in my site! Love the bouncing feature and looks great on my homepage. Thank you so much for this!

The code works but I find that the code below didnt stop my arrow from showing up in my footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>
$(window).scroll(function() {
    if ($(this).scrollTop()>300)
     {
        $('.bounce').hide(1000);
     }
    else
     {
      $('.bounce').show(1000);
     }
 });
</script>

On 8/18/2020 at 7:46 PM, jlama said:

The code works but I find that the code below didnt stop my arrow from showing up in my footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>
$(window).scroll(function() {
    if ($(this).scrollTop()>300)
     {
        $('.bounce').hide(1000);
     }
    else
     {
      $('.bounce').show(1000);
     }
 });
</script>

Are you using 7.1?

Did you copy and paste the code into Settings>Advanced>Code Injection> Header ?

It was a glitch...weird. 

Does anyone know how to add a page jump to a scroll arrow?