How can I create a bouncing down arrow?

mvpottery · May 14, 2016

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

Edited May 14, 2016 by mvpottery
Initial Revision

climbrick1 · May 16, 2016

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.

Edited May 16, 2016 by YoDawg

neilfossett · May 23

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.

Edited May 26 by neilfossett
Solution found

mvpottery · May 17, 2016

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

And how would I make it an arrow?

mvpottery · May 17, 2016

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

climbrick1 · May 17, 2016

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

Jem1570048218 · July 26, 2016

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

bb1992 · December 1, 2016

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

bb1992 · December 1, 2016

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.

Edited December 1, 2016 by bb1992
Initial Revision

HollandJames · March 15, 2017

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.

jfranklin45 · May 27

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?

derricksrandomviews · May 27

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

Edited May 27 by derricksrandomviews

neilfossett · June 11

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.

jbenrubi · July 27

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!

jlama · August 18

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>

neilfossett · August 26

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 ?

jlama · September 1

It was a glitch...weird.

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

chendricks · October 29

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

ZAYY · October 29

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

Edited October 29 by ZAYY

tuanphan · October 31

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?

How can I create a bouncing down arrow?

Question

Link to post

Top Posters For This Question

Popular Days

Top Posters For This Question

Popular Days

Popular Posts

Posted Images

19 answers to this question

Recommended Posts

Link to post

Link to post

Link to post

Link to post

Link to post

Link to post

Link to post

Link to post

Link to post

Link to post

Link to post

Link to post

Link to post

Link to post

Link to post

Link to post

Link to post

Link to post

Link to post

Create an account or sign in to comment

Support

Community

Developers

Resources