Scroll Down Arrow That Links To Next Section

MattyT208 · May 17, 2022

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?

tuanphan · May 20, 2022

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>

MattyT208 · May 24, 2022

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.

tuanphan · May 26, 2022

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

MattyT208 · May 26, 2022

10 hours ago, tuanphan said:

Move code to Homepage Header

Thank you!

MattyT208 · June 1, 2022

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>

tuanphan · June 2, 2022

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

MattyT208 · June 2, 2022

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

tuanphan · June 3, 2022

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);
}

MattyT208 · June 3, 2022

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.

MattyT208 · June 6, 2022

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).

tuanphan · June 11, 2022

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);
}

MattyT208 · June 13, 2022

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.

tuanphan · June 14, 2022

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?

MattyT208 · June 14, 2022

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.

tuanphan · June 15, 2022

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

MattyT208 · June 15, 2022

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.

June 16, 2022

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

tuanphan · June 16, 2022

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;
}

MattyT208 · June 16, 2022

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.

_yohandeschamps_ · August 16, 2023

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

tuanphan · August 19, 2023

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>

CorinnaR · February 8

@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)

Edited February 8 by CorinnaR

tuanphan · February 11

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

CorinnaR · February 12

@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>

Edited February 12 by CorinnaR

Scroll Down Arrow That Links To Next Section

Recommended Posts

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

tuanphan

Posted Images

Guest

Create an account or sign in to comment

News

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources