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

How can I create a bouncing down arrow?


mvpottery

Question

  • Answers 19
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

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

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 instruct

Posted Images

19 answers to this question

Recommended Posts

  • 1

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 by YoDawg
Link to post
  • 1
Posted (edited)

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 by neilfossett
Solution found
Link to post
  • 0

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

Link to post
  • 0

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 by bb1992
Initial Revision
Link to post
  • 0

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.

Link to post
  • 0
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?

Link to post
  • 0

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.

Link to post
  • 0
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!

Link to post
  • 0

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>

Screen Shot 2020-08-18 at 11.45.21 AM.png

Link to post
  • 0
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>

Screen Shot 2020-08-18 at 11.45.21 AM.png

Are you using 7.1?

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

 

Link to post
  • 0
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

 

Link to post
  • 0
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 by ZAYY
Link to post
  • 0
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?

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I came back. Will answer soon.

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