Scroll Down Arrow That Links To Next Section

I'd like to add a scroll down icon (just a simple opaque down arrow inside a circle) to my main homepage image. I'd like it to scroll to the next section once it's clicked. Can anyone help me with this?

Add to Settings > Advanced > Code Injection > Footer

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
	$(function() {
      $("#page>article>section:first-child").append('<a href="#" class="next-section"><i class="fa fa-angle-down" aria-hidden="true"></i></a>');
      $('a.next-section').on('click', function(e) {
        e.preventDefault();
        $('html, body').animate({ scrollTop: $(" #page>article>section:first-child").next().offset().top}, 500, 'linear');
      });
    });
</script>
<style>
	article>section:first-child a.next-section {
      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;
      background-color: rgba(0,0,0,0.5);
    width: 150px;
      padding-bottom: 20px;
      text-align: center;
    font-size: 50px;
    }
</style>

On 5/20/2022 at 8:01 AM, tuanphan said:

Add to Settings > Advanced > Code Injection > Footer

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
	$(function() {
      $("#page>article>section:first-child").append('<a href="#" class="next-section"><i class="fa fa-angle-down" aria-hidden="true"></i></a>');
      $('a.next-section').on('click', function(e) {
        e.preventDefault();
        $('html, body').animate({ scrollTop: $(" #page>article>section:first-child").next().offset().top}, 500, 'linear');
      });
    });
</script>
<style>
	article>section:first-child a.next-section {
      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;
      background-color: rgba(0,0,0,0.5);
    width: 150px;
      padding-bottom: 20px;
      text-align: center;
    font-size: 50px;
    }
</style>

 

Thank you, that works great. However, how do I limit it to only appear on the homepage? It's showing up on all pages.

On 5/25/2022 at 2:55 AM, MattyT208 said:

Thank you, that works great. However, how do I limit it to only appear on the homepage? It's showing up on all pages.

Move code to Homepage Header

10 hours ago, tuanphan said:

Move code to Homepage Header

Thank you!

How do I adjust my drop down arrow to look like Image_1? It currently looks like Image_2.

Code injection is currently this:

<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: 28px;
      height: 28px;
      margin-left: -12px;
      border-left: 8px solid #fff;
      border-bottom: 8px solid #fff;
      -webkit-transform: rotate(-45deg);
      transform: rotate(-45deg);
      -webkit-animation: sdb05 0s infinite;
      animation: sdb05 0s 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></a>');
      $('a.next-section').on('click', function(e) {
        e.preventDefault();
        $('html, body').animate({ scrollTop: $("#page section:first-child").next().offset().top}, 500, 'linear');
      });
    });
</script>

9 hours ago, MattyT208 said:

How do I adjust my drop down arrow to look like Image_1? It currently looks like Image_2.

Code injection is currently this:

<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: 28px;
      height: 28px;
      margin-left: -12px;
      border-left: 8px solid #fff;
      border-bottom: 8px solid #fff;
      -webkit-transform: rotate(-45deg);
      transform: rotate(-45deg);
      -webkit-animation: sdb05 0s infinite;
      animation: sdb05 0s 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></a>');
      $('a.next-section').on('click', function(e) {
        e.preventDefault();
        $('html, body').animate({ scrollTop: $("#page section:first-child").next().offset().top}, 500, 'linear');
      });
    });
</script>

Can you share link to your site? We can tweak code easier

5 hours ago, tuanphan said:

Can you share link to your site? We can tweak code easier

https://cinnamon-arugula-lbx4.squarespace.com/new-homepage-test-1

yil1TONG4toft*ib

Don't remove any code in your current code. Add this to Design > Custom CSS

a.next-section {
    border: 10px solid rgba(255,255,255,0.5) !important;
    width: 70px;
    height: 70px;
    border-radius: 100%;
    padding: 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
}
#page section:first-child a.next-section span {
    -webkit-transform: translateY(-50%) rotate(-45deg);
    transform: translateY(-50%) rotate(-45deg);
    top: calc(50% - 5px);
    border-color: rgba(255,255,255,0.5);
}

8 hours ago, tuanphan said:

Don't remove any code in your current code. Add this to Design > Custom CSS

a.next-section {
    border: 10px solid rgba(255,255,255,0.5) !important;
    width: 70px;
    height: 70px;
    border-radius: 100%;
    padding: 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
}
#page section:first-child a.next-section span {
    -webkit-transform: translateY(-50%) rotate(-45deg);
    transform: translateY(-50%) rotate(-45deg);
    top: calc(50% - 5px);
    border-color: rgba(255,255,255,0.5);
}

 

This worked great. Thank you so much.

On 6/3/2022 at 12:28 AM, tuanphan said:

Don't remove any code in your current code. Add this to Design > Custom CSS

a.next-section {
    border: 10px solid rgba(255,255,255,0.5) !important;
    width: 70px;
    height: 70px;
    border-radius: 100%;
    padding: 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
}
#page section:first-child a.next-section span {
    -webkit-transform: translateY(-50%) rotate(-45deg);
    transform: translateY(-50%) rotate(-45deg);
    top: calc(50% - 5px);
    border-color: rgba(255,255,255,0.5);
}

 

This worked great at first and then for some reason (minutes later) the arrow began displaying as such (see attachment).

On 6/3/2022 at 1:28 PM, tuanphan said:

Don't remove any code in your current code. Add this to Design > Custom CSS

a.next-section {
    border: 10px solid rgba(255,255,255,0.5) !important;
    width: 70px;
    height: 70px;
    border-radius: 100%;
    padding: 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
}
#page section:first-child a.next-section span {
    -webkit-transform: translateY(-50%) rotate(-45deg);
    transform: translateY(-50%) rotate(-45deg);
    top: calc(50% - 5px);
    border-color: rgba(255,255,255,0.5);
}

 

I have a typo in the code. Add this new code

a.next-section {
    border: 10px solid rgba(255,255,255,0.5) !important;
    width: 70px;
    height: 70px;
    border-radius: 100%;
    padding: 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
}
#page section:first-child a.next-section span {
    -webkit-transform: translateY(-50%) rotate(-45deg);
    transform: translateY(-50%) rotate(-45deg);
    top: calc(~"50% - 5px");
    border-color: rgba(255,255,255,0.5);
}

On 6/10/2022 at 9:34 PM, tuanphan said:

I have a typo in the code. Add this new code

a.next-section {
    border: 10px solid rgba(255,255,255,0.5) !important;
    width: 70px;
    height: 70px;
    border-radius: 100%;
    padding: 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
}
#page section:first-child a.next-section span {
    -webkit-transform: translateY(-50%) rotate(-45deg);
    transform: translateY(-50%) rotate(-45deg);
    top: calc(~"50% - 5px");
    border-color: rgba(255,255,255,0.5);
}

 

I tried this and it's still not working correctly – it did the same thing as before. Do you think there may be conflicting code that I have pasted into the Advanced> Page Header Code Injection for the particular page? The code that is in there is the following:

<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: 2px solid #fff;
      border-bottom: 2px solid #fff;
      -webkit-transform: rotate(-45deg);
      transform: rotate(-45deg);
      -webkit-animation: sdb05 1.5s 0;
      animation: sdb05 1.5s 0;
      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></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 don't know if that is causing issues with the code you said to replace in the Custom CSS window, which is this:

a.next-section {
    border: 10px solid rgba(255,255,255,0.5) !important;
    width: 70px;
    height: 70px;
    border-radius: 100%;
    padding: 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
}
#page section:first-child a.next-section span {
    -webkit-transform: translateY(-50%) rotate(-45deg);
    transform: translateY(-50%) rotate(-45deg);
    top: calc(~"50% - 5px");
    border-color: rgba(255,255,255,0.5);
}

I hope this makes sense. Thanks.

On 6/11/2022 at 10:34 AM, tuanphan said:

I have a typo in the code. Add this new code

a.next-section {
    border: 10px solid rgba(255,255,255,0.5) !important;
    width: 70px;
    height: 70px;
    border-radius: 100%;
    padding: 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
}
#page section:first-child a.next-section span {
    -webkit-transform: translateY(-50%) rotate(-45deg);
    transform: translateY(-50%) rotate(-45deg);
    top: calc(~"50% - 5px");
    border-color: rgba(255,255,255,0.5);
}

 

Have you added this code to DESIGN > CUSTOM CSS yet? 

4 hours ago, tuanphan said:

Have you added this code to DESIGN > CUSTOM CSS yet? 

Yes, I did. I'm wondering if my custom codes and scripts need to be cleaned up – like maybe I have something in the Page Settings>Advanced window that is conflicting with this as I've added code to that window from other individuals.

Try adding to bottom of Custom CSS box. It it still doesn't work, keep the code in Custom CSS, we can check easier

12 hours ago, tuanphan said:

Try adding to bottom of Custom CSS box. It it still doesn't work, keep the code in Custom CSS, we can check easier

I added to the bottom of Custom CSS like you suggested. Funny thing is that when I have the Custom CSS window open, the down arrow is centered, but when I close out of the Custom CSS window and refresh that page, the down arrow is once again not centered.

On 6/2/2022 at 6:32 PM, MattyT208 said:

https://www.businessstudynotes.com/marketing/marketing-terms new-homepage-test-1yil1TONG4toft*ib

 

Thanks you for sharing 

Okay. Some old code override new code.

Try this new code

a.next-section {
    border: 10px solid rgba(255,255,255,0.5) !important;
    width: 70px;
    height: 70px;
    border-radius: 100%;
    padding: 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
}
#page section:first-child a.next-section span {
    -webkit-transform: translateY(-50%) rotate(-45deg) !important;
    transform: translateY(-50%) rotate(-45deg) !important;
    top: calc(~"50% - 5px") !important;
    border-color: rgba(255,255,255,0.5) !important;
}

4 hours ago, tuanphan said:

Okay. Some old code override new code.

Try this new code

a.next-section {
    border: 10px solid rgba(255,255,255,0.5) !important;
    width: 70px;
    height: 70px;
    border-radius: 100%;
    padding: 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
}
#page section:first-child a.next-section span {
    -webkit-transform: translateY(-50%) rotate(-45deg) !important;
    transform: translateY(-50%) rotate(-45deg) !important;
    top: calc(~"50% - 5px") !important;
    border-color: rgba(255,255,255,0.5) !important;
}

 

Yes! That works great now. Thank you so much.

On 5/20/2022 at 10:01 PM, tuanphan said:

Add to Settings > Advanced > Code Injection > Footer

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
	$(function() {
      $("#page>article>section:first-child").append('<a href="#" class="next-section"><i class="fa fa-angle-down" aria-hidden="true"></i></a>');
      $('a.next-section').on('click', function(e) {
        e.preventDefault();
        $('html, body').animate({ scrollTop: $(" #page>article>section:first-child").next().offset().top}, 500, 'linear');
      });
    });
</script>
<style>
	article>section:first-child a.next-section {
      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;
      background-color: rgba(0,0,0,0.5);
    width: 150px;
      padding-bottom: 20px;
      text-align: center;
    font-size: 50px;
    }
</style>

 

Hey @tuanphan.

Anyway to disable it on mobile?

Website: https://www.yodeschamps.com/

Thank you.

Yohan

On 8/17/2023 at 5:59 AM, _yohandeschamps_ said:

Hey @tuanphan.

Anyway to disable it on mobile?

Website: https://www.yodeschamps.com/

Thank you.

 

Yohan

Add this under

<style>
  @media screen and (max-width:767px) {
    article>section:first-child a.next-section {
    	display: none !important;
      	visibility: hidden !important;
      	z-index: -1 !important;
    }
  }
</style>

@tuanphan

I'm using this on my site, but after inserting another section (for switching to a different mobile portfolio) the arrow does not work anymore. Probably because the section it is currently linked to does not show on desktop?

is it possible to make it jump to a specific section, in this case the one saying "hi - wir sind studio applaus"? 

I already tried inserting the section id of this specific section in various placements, but that didn't work and I don't want to break the code there.

Also I'd love to have the same arrow in the mobile page - I'm switching to a gallery slideshow there. 

could you help me out with that?

page: https://scarlet-clementine-rsng.squarespace.com

pw: applaus (we just went online, maybe you won't need that anymore)

On 2/8/2024 at 9:30 PM, CorinnaR said:

@tuanphan

I'm using this on my site, but after inserting another section (for switching to a different mobile portfolio) the arrow does not work anymore. Probably because the section it is currently linked to does not show on desktop?

is it possible to make it jump to a specific section, in this case the one saying "hi - wir sind studio applaus"? 

I already tried inserting the section id of this specific section in various placements, but that didn't work and I don't want to break the code there.

Also I'd love to have the same arrow in the mobile page - I'm switching to a gallery slideshow there. 

could you help me out with that?

page: https://scarlet-clementine-rsng.squarespace.com

pw: applaus (we just went online, maybe you won't need that anymore)

Which exact code did you add? I see an error from my browser

@tuanphan

this is the code I used (in header) , which I got from another post on here. I can also switch to a different code if that's easier 🙂

edit: found the syntax-error, the arrow is now showing again in desktop mode but still not jumping to the section. plus it should show up in the mobile slideshow gallery as well. 

<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;
      @media screen and (max-width: 767px) {
		top:-100%;}
      left: 50%;
      width: 20px;
      height: 20px;
      margin-left: -12px;
      border-left: 1px solid #fff;
      border-bottom: 1px solid #fff;
      -webkit-transform: rotate(-45deg);
      transform: rotate(-45deg);
      -webkit-animation: sdb05 3s infinite;
      animation: sdb05 3s 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="next-section" class="next-section"><span></span></a>');
      $('a.next-section').on('click', function(e) {
        e.preventDefault();
        $('html, body').animate({ scrollTop: $("#page section:first-child").next().offset().top}, 500, 'linear');
      });
    });
</script>