How to Add Scroll Down Arrow in Squarespace for Any Template

Squarespace makes it easy to build website pretty much without any technical requirement.We just need to drag and drop. And make customization and our cool website is ready in no time.

But it's not always rainbows and sunshine.

Here's a problem that I faced recently.

I wanted to add **scroll down arrow **on the cover page.

We cannot add code snippet within cover page banner description.

But in order to add custom scroll down arrow, we need to add custom HTML block in it. **How to Add Scroll down Arrow **Just create DOM element using javascript and append it.

You can use Embed block on that page and dynamically inject it.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
  $(
    '<section class="scroll-down"><a href="javascript:scrollDown();"><span></span></a></section>'
  ).appendTo('.desc-wrapper');

  function scrollDown() {
    $('html, body').animate(
      {
        scrollTop: $('#what-1').offset().top,
      },
      2000
    );
  }
</script>

<style>
  .scroll-down {
    position: relative;
    width: 100%;
    height: 100%;
  }
  .scroll-down a {
    position: absolute;
    left: 50%;
    z-index: 2;
    display: inline-block;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
    color: #fff;
    letter-spacing: 0.1em;
    text-decoration: none;
    transition: opacity 0.3s;
  }
  .scroll-down a span {
    position: absolute;
    top: 0;
    left: 50%;
    width: 24px;
    height: 24px;
    margin-left: -12px;
    border-left: 1px solid #fff;
    border-bottom: 1px solid #fff;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    box-sizing: border-box;
  }
</style>