I'd like to add a scroll down icon (opaque down arrow) to one section on my homepage. I'd like it to scroll to the next section once it's clicked. Can someone help me with this please?

Hi @qeys - I would suggest using an anchor link button in the first section, and targeting the second section so that it scrolls accordingly. If you want a customized down arrow icon, that can be created with a custom png or svg image file, or just using a unicode arrow symbol ↓,  depending on the styling you'd like.

If you can provide a bit more context, and the site URL (w/ password, if applicable), that can help us point you in the right direction.

If the site is Business Plan or higher, you can using this code (Settings > Developer Tools > Code Injection > Footer). 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<style>
	article>section:first-child a.next-section {
      padding-top: 70px;
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      z-index: 2;
      display: inline-block;
      color: #fff;
      font : normal 400 20px/1 'Josefin Sans', sans-serif;
      letter-spacing: .1em;
      text-decoration: none;
      transition: opacity .3s;
        animation: fade_move_down 4s ease-in-out infinite;
    }
article>section:first-child a.next-section:before {
    content: "\e009";
    font-family: 'squarespace-ui-font';
    font-size: 50px;
}
/*animated scroll arrow animation*/
@-webkit-keyframes fade_move_down {
  0%   { -webkit-transform:translate(0,-10px); opacity: 0;  }
  50%  { opacity: 1;  }
  100% { -webkit-transform:translate(0,10px); opacity: 0; }
}
@-moz-keyframes fade_move_down {
  0%   { -moz-transform:translate(0,-10px); opacity: 0;  }
  50%  { opacity: 1;  }
  100% { -moz-transform:translate(0,10px); opacity: 0; }
}
@keyframes fade_move_down {
  0%   { transform:translate(0,-10px); opacity: 0;  }
  50%  { opacity: 1;  }
  100% { transform:translate(0,10px); opacity: 0; }
}
</style>
<script>
	$(function() {
      $("body.homepage #page>article>section:first-child").append('<a href="#" class="next-section"></a>');
      $('a.next-section').on('click', function(e) {
        e.preventDefault();
        $('html, body').animate({ scrollTop: $("body.homepage #page>article>section:first-child").next().offset().top}, 500, 'linear');
      });
    });
</script>

To change arrow color, change the line

color: #fff;