Help with Adding a Scroll Button to Full-Page Carousel

Site URL: http://www.blupace.com

Hey all,

I’m hoping someone can help me with a bit of code to make my site look a little slicker.

I have one challenge I’m trying to solve right now:

On my home page (www.pacethestreet.com), I have a full-page carousel. I would like to add a button, featuring a down arrow, that users can press to scroll down to the next section of the page.

Any guidance or code snippets would be greatly appreciated!

Thanks in advance!

You can use this code to Website Tools > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
  $('<div class="down-arrow"></div>').insertAfter('section[data-section-id="660bdc1764321203a92b387e"] .user-items-list-carousel__slides');
$('.down-arrow').on('click', function() {
    $('html, body').animate({
        scrollTop: $('.user-items-list-carousel__slides').next().offset().top
    }, 500); 
});
</script>
<style>
  .down-arrow {
    width: 50px;
    height: 50px;
    background-color: gray;
    border-radius: 50%;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
}

.down-arrow::before {
    content: '\e009';
    font-family: 'squarespace-ui-font';
    font-size: 20px;
    color: white;
}

</style>

Hey thanks for your response.
But is there any way to do this without the code injection?
I don’t need all of the options that come with an upgraded plan, and paying an extra €10 per month just to have this dropdown arrow seems a little expensive.

Kind regards,

On 10/11/2024 at 6:31 PM, pace said:

Hey thanks for your response.
But is there any way to do this without the code injection?
I don’t need all of the options that come with an upgraded plan, and paying an extra €10 per month just to have this dropdown arrow seems a little expensive.

Kind regards,

You can edit current page > Add a block (anywhere on page) > Choose Markdown > Paste the code.

It still work in Personal Plan with this way

Thanks for the suggestion but this doesn’t work..
I get the message:

Adding JavaScript and iframe embeds is a Premium Feature.
Upgrade to a professional plan or higher to publish your site with premium blocks.

Yup my mistake, i was using a code block.
This worked perfectly. Thank you kindly for you support and patience 🙂 

You are awesome 😆