Make a scroll-down arrow clickable - Bedford

Site URL: https://www.hendrenwriting.com

I found this useful bit of CSS (below) to insert a "scroll down" icon on my banner. I managed that, but I'd like this icon be clickable -- to actually take the reader down to where the content begins (under the banner). I'm sure it's just a simple bit of code injection, but I don't know what it is. Can anyone give me the code to make that work? Many thanks.  

.banner-thumbnail-wrapper:after {
 content: "\e02d";
 display: inline-block;
 position: absolute;
 z-index: 100;
 color: #D3D3D3;
 width: 100%;
 text-align: center;
 font-family: 'squarespace-ui-font';
 transform: rotate(90deg);
 cursor: pointer;
 font-style: normal;
 -webkit-font-smoothing: antialiased;
 font-size: 32px;
 margin-top: -100px;
}

Add a Code Block > Paste this code. 

<div class="arrow bounce">
  <a class="fa fa-arrow-down fa-2x" href="#next-section"></a>
</div>
<style>
.arrow a {
  color: white;
  text-decoration: none;
}
.arrow {
  text-align: center;
  margin: 8% 0;
}
.bounce {
  -webkit-animation: bounce 2s infinite;
  animation: bounce 2s infinite;
}
@-webkit-keyframes bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-30px);
  }
  60% {
    transform: translateY(-15px);
  }
}
@keyframes bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-30px);
  }
  60% {
    transform: translateY(-15px);
  }
}

</style>

Next, in the under current section, add a Code Block > Paste this code

<span id="next-section"></span>

Thanks tuanphan. I'll experiment with that to see if I can get it to work. 

Hi @tuanphan, many thanks for the reply. But as far as I can tell, I can't use your code on my banner image. Right? It seems to be for a normal code block on a page.

Do you have a bit of code that will work for the white arrow on the banner image here: www.hendrenwriting.com? 

20 hours ago, JHendren said:

Hi @tuanphan, many thanks for the reply. But as far as I can tell, I can't use your code on my banner image. Right? It seems to be for a normal code block on a page.

Do you have a bit of code that will work for the white arrow on the banner image here: www.hendrenwriting.com? 

You can add a text link (with anchor link) on Banner Description, then we will give the code to change text link to arrow icon.

OK. So if I use the text "scroll down" in the Banner Description, can you transform that text into a down arrow, linking it to the anchor #home-top? 

18 hours ago, JHendren said:

OK. So if I use the text "scroll down" in the Banner Description, can you transform that text into a down arrow, linking it to the anchor #home-top? 

You can add link: #home-top on text link. We can give the code to change text link to down arrow