How can I create a bouncing down arrow?

I'd like to create a bouncing down arrow like the one on this website:

https://www.cookmellow.com/

It would be within the index pages of Brine / Marta template -- so that people know to scroll down (particularly on homepage)...

Thanks a lot

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.

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

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.

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?

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.

For me it stays on all the pages not just the first

On 5/22/2020 at 7: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.

At first when I tried this code, all I got was the white arrow, however it was NOT bouncing.

After messing around, I removed the very beginning and end <style> & </style> brackets.

Boom. Worked perfectly.

Now, can anyone help me if I want more than 1 bouncing down arrow?

I/m looking to make these arrows anchor links that scroll you down the page the the next section when clicked.

Tried pasting the codes in the proper content areas however, they all just overlap eachother and stay up in the header area...

Appreciate anyone that can help.

Heres my website: https://www.fyiindustries.com

Thanks 

On 10/30/2020 at 4:08 AM, ZAYY said:

At first when I tried this code, all I got was the white arrow, however it was NOT bouncing.

After messing around, I removed the very beginning and end <style> & </style> brackets.

Boom. Worked perfectly.

 

Now, can anyone help me if I want more than 1 bouncing down arrow?

I/m looking to make these arrows anchor links that scroll you down the page the the next section when clicked.

Tried pasting the codes in the proper content areas however, they all just overlap eachother and stay up in the header area...

Appreciate anyone that can help.

Heres my website: https://www.fyiindustries.com

Thanks 

Have you solved this yet?

Is there a way to hide the arrow once the site visitor has started to scroll down? This code works just as described on my site but I only wish to indicate once that there is more content further down so would like the arrow to go away once the visitor begins to scroll down if possible.

Could that be achieved through adjusting this script perhaps?

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

Or some other way?

Thanks!

I found the answer to my own question above. 

if ($(this).scrollTop()>300)

Reducing the value here to 100 achieved the desired effect (bouncing arrow fading away) on my site as the visitor begins to scroll down. I figure the value you need to set here depends on how long your page is (i.e. how much a visitor needs to scroll down to reach the bottom).