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

Site URL: https://aishwaryabalasankar.com

I have a slide down arrow animation on my homepage. I am looking to enable clicking on the arrow and for it to slide down to the first project (the section below). Also I want to change the slide down arrow color to my logo color. Thanks so much for your help!

37 minutes ago, Aishwarya said:

Site URL: https://aishwaryabalasankar.com

I have a slide down arrow animation on my homepage. I am looking to enable clicking on the arrow and for it to slide down to the first project (the section below). Also I want to change the slide down arrow color to my logo color. Thanks so much for your help!

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>

5 minutes ago, 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>

Thanks a lot for the response! Looks like my plan doesn't support code injection feature 😞 Is there an alternative?

3 minutes ago, Aishwarya said:

Thanks a lot for the response! Looks like my plan doesn't support code injection feature 😞 Is there an alternative?

No sorry

12 minutes ago, bangank36 said:

No sorry

Thanks! Looking for help with the question below! Really appreciate your help! Thank you

38 minutes ago, bangank36 said:

No sorry

I was wondering if there is an option to make it a simple clickable slide down arrow which slides down to the next section without animation (by inserting a code block)

5 minutes ago, Aishwarya said:

I was wondering if there is an option to make it a simple clickable slide down arrow which slides down to the next section without animation (by inserting a code block)

It needs javascript and js blocked in basic plan

If you use Personal Plan, try this @Aishwarya

1. Add a Code Block (to show arrows)

<div class="bottom">
  <a class="scroll-indicator" href="#tscroll"></a>
</div>
<style>
.bottom {
    position: absolute;
    bottom: 0;
    width: 100%;
    left: 50%;
    transform: translateX(-50%);
  text-align: center;
}

.scroll-indicator {
display: inline-block;
  width: 24px;
  height: 24px;
  margin: 16px auto;
  border-right: 2px solid #FFF;
  border-bottom: 2px solid #FFF;
  border-bottom-right-radius: 2px;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-name: fade;
          animation-name: fade;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
}

@-webkit-keyframes fade {
  0% {
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
    opacity: 1;
  }
  75% {
    -webkit-transform: rotate(45deg) translateY(-6px) translateX(-6px);
            transform: rotate(45deg) translateY(-6px) translateX(-6px);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@keyframes fade {
  0% {
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
    opacity: 1;
  }
  75% {
    -webkit-transform: rotate(45deg) translateY(-6px) translateX(-6px);
            transform: rotate(45deg) translateY(-6px) translateX(-6px);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
</style>

2. In the position where you want the arrow to scroll down, add a Code Block > Paste this code

<span id="tscroll"></span>

This code is great, but is there a way to have the arrow be aligned with the bottom of a section? @tuanphan

On 1/15/2021 at 2:46 AM, benxmacdonald said:

This code is great, but is there a way to have the arrow be aligned with the bottom of a section? @tuanphan

Add to Design > CUstom CSS

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

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

Add to Design > CUstom CSS

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

 

This isn't working for me when I copy and paste it into Custom CSS even if I change first-child to second-child depending on the section where I want the down arrow to be. Is there something else I need to change if I want to use the arrow to be in another section as well?

On 12/21/2020 at 9:42 PM, tuanphan said:

If you use Personal Plan, try this @Aishwarya

1. Add a Code Block (to show arrows)

<div class="bottom">
  <a class="scroll-indicator" href="#tscroll"></a>
</div>
<style>
.bottom {
    position: absolute;
    bottom: 0;
    width: 100%;
    left: 50%;
    transform: translateX(-50%);
  text-align: center;
}

.scroll-indicator {
display: inline-block;
  width: 24px;
  height: 24px;
  margin: 16px auto;
  border-right: 2px solid #FFF;
  border-bottom: 2px solid #FFF;
  border-bottom-right-radius: 2px;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-name: fade;
          animation-name: fade;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
}

@-webkit-keyframes fade {
  0% {
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
    opacity: 1;
  }
  75% {
    -webkit-transform: rotate(45deg) translateY(-6px) translateX(-6px);
            transform: rotate(45deg) translateY(-6px) translateX(-6px);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@keyframes fade {
  0% {
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
    opacity: 1;
  }
  75% {
    -webkit-transform: rotate(45deg) translateY(-6px) translateX(-6px);
            transform: rotate(45deg) translateY(-6px) translateX(-6px);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
</style>

2. In the position where you want the arrow to scroll down, add a Code Block > Paste this code

<span id="tscroll"></span>

 

I would prefer not to use the anchor point. How can I remove the hyperlink that's attached to the down arrow?

Thanks so much for the help!

On 12/19/2020 at 5: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>

I know this is an older post, but is there a way to hide this for a mobile site? the bouncing arrow doesn't look good on mobile

3 hours ago, Atara said:

I know this is an older post, but is there a way to hide this for a mobile site? the bouncing arrow doesn't look good on mobile

Use css for it

@media only screen and (max-width: 640px) {
  .next-section {
  	display: none !important;
  }

}

6 hours ago, bangank36 said:

Use css for it

@media only screen and (max-width: 640px) {
  .next-section {
  	display: none !important;
  }

}

 

thank you!

@bangank36is there any way to cancel that "Scroll" text under the scroll down arrow?

2 minutes ago, abacostudios said:

@bangank36is there any way to cancel that "Scroll" text under the scroll down arrow?

You can find it in the js part here

Ok so i can simply delete that scroll text right?

19 minutes ago, abacostudios said:

Ok so i can simply delete that scroll text right?

 

yes

@bangank36

Hi, your code was really helpful to get an arrow on the homepage.

Would you know how to style it so it looks like this and responds how it does on rollover - https://wepresent.wetransfer.com/story/sasha-staicu/

Many thanks!

On 8/18/2021 at 6:03 PM, cj87 said:

@bangank36

Hi, your code was really helpful to get an arrow on the homepage.

Would you know how to style it so it looks like this and responds how it does on rollover - https://wepresent.wetransfer.com/story/sasha-staicu/

Many thanks!

Do you still need help?

This works very well for our site, thank you. I managed to easily change the colours of the text and arrows to match our site profile. Is there anyway to have the arrow fixed to the bottom of the browser page of the user of the website, rather than at the bottom of the first section?

On 10/30/2021 at 4:05 PM, keithwlarson said:

This works very well for our site, thank you. I managed to easily change the colours of the text and arrows to match our site profile. Is there anyway to have the arrow fixed to the bottom of the browser page of the user of the website, rather than at the bottom of the first section?

edit

Quote

  position: absolute;

to

Quote

  position: fixed;

Our demo website is setup to work on touchscreens at public libraries and science centres. Right now, we notice that users don't seem to notice that there is more content to scroll down to explore. I am trying to improve the UX of the page to have the scroll arrow (and text) float at the bottom of the users browser window, so when they scroll down the arrow follows until they reach the bottom. Ideally, it would turn into an up arrow when the user reaches the bottom of the page. Basically, I do not want the arrow tied to any section, but help the user navigate.

I do not see a difference on my screen when I change if from 'absolute' to 'fixed'. It seems to be tied to the bottom of the section on my Square Space 7.1 website.

On 12/19/2020 at 5: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>

Hello @bangank36 thank you so much for this. I was wondering which line of the code I would need to alter to target it specifically to one section of one page? It's working as intended however is showing up on the entire intended page on scroll. 

Thanks again

On 2/28/2022 at 5:26 AM, zacht said:

thank you so much for this. I was wondering which line of the code I would need to alter to target it specifically to one section of one page? It's working as intended however is showing up on the entire intended page on scroll. 

Thanks again

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