How do I make the scroll down arrow on my homepage clickable and to scroll down to the section below?

10 hours ago, tuanphan said:

Change to this code

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<style>
	[data-section-id="enter id here"] 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;
    }
   [data-section-id="enter id here"] a.next-section 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);
      -webkit-animation: sdb05 1.5s infinite;
      animation: sdb05 1.5s infinite;
      box-sizing: border-box;
    }
    @-webkit-keyframes sdb05 {
      0% {
        -webkit-transform: rotate(-45deg) translate(0, 0);
        opacity: 0;
      }
      50% {
        opacity: 1;
      }
      100% {
        -webkit-transform: rotate(-45deg) translate(-20px, 20px);
        opacity: 0;
      }
    }
    @keyframes sdb05 {
      0% {
        transform: rotate(-45deg) translate(0, 0);
        opacity: 0;
      }
      50% {
        opacity: 1;
      }
      100% {
        transform: rotate(-45deg) translate(-20px, 20px);
        opacity: 0;
      }
    }
</style>
<script>
	$(function() {
      $('[data-section-id="enter id here"]').append('<a href="#" class="next-section"><span></span>Scroll</a>');
      $('a.next-section').on('click', function(e) {
        e.preventDefault();
        $('html, body').animate({ scrollTop: $('[data-section-id="enter id here"]').next().offset().top}, 500, 'linear');
      });
    });
</script>

I used 4 code like this

[data-section-id="enter id here"]

Replace with your data section id, use this tool to find id. https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff?hl=en

@tuanphan Thank you as always for the help. This worked perfectly. Have a wonderful day. 

On 3/3/2022 at 10:27 AM, tuanphan said:

Change to this code

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<style>
	[data-section-id="enter id here"] 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;
    }
   [data-section-id="enter id here"] a.next-section 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);
      -webkit-animation: sdb05 1.5s infinite;
      animation: sdb05 1.5s infinite;
      box-sizing: border-box;
    }
    @-webkit-keyframes sdb05 {
      0% {
        -webkit-transform: rotate(-45deg) translate(0, 0);
        opacity: 0;
      }
      50% {
        opacity: 1;
      }
      100% {
        -webkit-transform: rotate(-45deg) translate(-20px, 20px);
        opacity: 0;
      }
    }
    @keyframes sdb05 {
      0% {
        transform: rotate(-45deg) translate(0, 0);
        opacity: 0;
      }
      50% {
        opacity: 1;
      }
      100% {
        transform: rotate(-45deg) translate(-20px, 20px);
        opacity: 0;
      }
    }
</style>
<script>
	$(function() {
      $('[data-section-id="enter id here"]').append('<a href="#" class="next-section"><span></span>Scroll</a>');
      $('a.next-section').on('click', function(e) {
        e.preventDefault();
        $('html, body').animate({ scrollTop: $('[data-section-id="enter id here"]').next().offset().top}, 500, 'linear');
      });
    });
</script>

I used 4 code like this

[data-section-id="enter id here"]

Replace with your data section id, use this tool to find id. https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff?hl=en

This is great, I have it working on one page and not the others (as intended). What would be the best way to have this appear on additional pages, but still not all pages? I'm new to CSS so apologies if the questions are basic.

Should I copy and paste the entire code multiple times and then use the unique section ids in each code copy? Or is there a way to list multiple section IDs in a single block? 

Or do I only need to copy the script section multiple times? 

3 hours ago, joeshmoe said:

This is great, I have it working on one page and not the others (as intended). What would be the best way to have this appear on additional pages, but still not all pages? I'm new to CSS so apologies if the questions are basic.

Should I copy and paste the entire code multiple times and then use the unique section ids in each code copy? Or is there a way to list multiple section IDs in a single block? 

Or do I only need to copy the script section multiple times? 

First, in <style> code, change this line

Quote

[data-section-id="enter id here"] a.next-section

to this

[data-section-id="enter id1 here"] a.next-section, [data-section-id="enter id2 here"] a.next-section, [data-section-id="enter id3 here"] a.next-section

next, change this

Quote

[data-section-id="enter id here"] a.next-section span

to this

[data-section-id="enter id1 here"] a.next-section span, [data-section-id="enter id2 here"] a.next-section span, [data-section-id="enter id3 here"] a.next-section span

Next, in <script> code, change this line (script has 2 same code, need to change both)

Quote

[data-section-id="enter id here"]

to this

[data-section-id="enter id1 here"], [data-section-id="enter id2 here"], [data-section-id="enter id3 here"]

awesome, thank you!

On 12/19/2020 at 3:32 AM, bangank36 said:

Add this to Settings->Advanced->Code Injection

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<style>
	#page 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;
    }
    #page section:first-child a.next-section 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);
      -webkit-animation: sdb05 1.5s infinite;
      animation: sdb05 1.5s infinite;
      box-sizing: border-box;
    }
    @-webkit-keyframes sdb05 {
      0% {
        -webkit-transform: rotate(-45deg) translate(0, 0);
        opacity: 0;
      }
      50% {
        opacity: 1;
      }
      100% {
        -webkit-transform: rotate(-45deg) translate(-20px, 20px);
        opacity: 0;
      }
    }
    @keyframes sdb05 {
      0% {
        transform: rotate(-45deg) translate(0, 0);
        opacity: 0;
      }
      50% {
        opacity: 1;
      }
      100% {
        transform: rotate(-45deg) translate(-20px, 20px);
        opacity: 0;
      }
    }
</style>
<script>
	$(function() {
      $("#page section:first-child").append('<a href="#" class="next-section"><span></span>Scroll</a>');
      $('a.next-section').on('click', function(e) {
        e.preventDefault();
        $('html, body').animate({ scrollTop: $("#page section:first-child").next().offset().top}, 500, 'linear');
      });
    });
</script>

This worked perfectly for me. Is there a way to add a circle around the down arrow so the graphic stands out a little more?

1 hour ago, MattyT208 said:

This worked perfectly for me. Is there a way to add a circle around the down arrow so the graphic stands out a little more?

Do you mean something like this?

You can try the following

.scroll-down:after {
  content:'';
  display:block;
  width: 100%;
  height: 100%;
  position: absolute;
  border-radius: 50%;
  transform: scale(3);
  border: 1px solid red;
}

Let me know how it goes

14 hours ago, bangank36 said:

Do you mean something like this?

You can try the following

.scroll-down:after {
  content:'';
  display:block;
  width: 100%;
  height: 100%;
  position: absolute;
  border-radius: 50%;
  transform: scale(3);
  border: 1px solid red;
}

Let me know how it goes

I tried this separately in custom css setting and in code injection setting and nothing seemed to change.

15 hours ago, MattyT208 said:

This worked perfectly for me. Is there a way to add a circle around the down arrow so the graphic stands out a little more?

I just noticed that the scroll arrow is on every page, is there a way to limit it to only the homepage?

Can you share your site so we can take a look on yours

https://cinnamon-arugula-lbx4.squarespace.com

WNC3nek5ctr8eyr-tyf

13 minutes ago, MattyT208 said:

https://cinnamon-arugula-lbx4.squarespace.com

WNC3nek5ctr8eyr-tyf

 

I forgot to mention that the page I am working on with the scroll down button is in the Not Linked section named "New Homepage Test". It is not the main homepage.

1 hour ago, MattyT208 said:

I just noticed that the scroll arrow is on every page, is there a way to limit it to only the homepage?

Never mind, I figured out how to apply arrow only to homepage.

On 12/19/2020 at 2:32 AM, Beyondspace said:

How would I alter the code to either slow or remove the animation, so that I just have a clickable arrow, no animation?

 

How would I alter the code to either slow or remove the animation, so that I just have a clickable arrow, no animation?

On 1/10/2023 at 2:51 AM, 67Chevy said:

How would I alter the code to either slow or remove the animation, so that I just have a clickable arrow, no animation?

Remove this line from above code

-webkit-animation: sdb05 1.5s infinite;
      animation: sdb05 1.5s infinite;

On 1/17/2021 at 6:09 AM, tuanphan said:

Add to Design > CUstom CSS

body.homepage #page section:first-child .content-wrapper {
    padding-bottom: 0 !important;
}

 

Hi,

Thanks so much for this thread. I'm trying this CSS solution. I'm new to CSS and am trying to understand how to modify this code to my own website. I want the down arrow to appear at the very bottom of the first section of the page, on most but not all pages on my site.

I have the section ID browser extension, but I'm not sure how to insert the section ID into this code.

Thanks! @tuanphan

On 1/16/2024 at 2:14 AM, squarepeg--roundhole said:

Hi,

Thanks so much for this thread. I'm trying this CSS solution. I'm new to CSS and am trying to understand how to modify this code to my own website. I want the down arrow to appear at the very bottom of the first section of the page, on most but not all pages on my site.

I have the section ID browser extension, but I'm not sure how to insert the section ID into this code.

Thanks! @tuanphan

Replace this line

body.homepage #page section:first-child

with your

section id