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

How can I create a bouncing down arrow?

Question

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 by mvpottery
Initial Revision

Share this post


Link to post

11 answers to this question

Recommended Posts

  • 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

Share this post


Link to post
  • 0

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

Share this post


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

Share this post


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

Share this post


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.

Share this post


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?

Share this post


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