I'd like to add a scroll down icon (opaque down arrow) to one section on my homepage. I'd like it to scroll to the next section once it's clicked. Can someone help me with this please?

Hi @qeys - I would suggest using an anchor link button in the first section, and targeting the second section so that it scrolls accordingly. If you want a customized down arrow icon, that can be created with a custom png or svg image file, or just using a unicode arrow symbol ↓,  depending on the styling you'd like.

If you can provide a bit more context, and the site URL (w/ password, if applicable), that can help us point you in the right direction.

If the site is Business Plan or higher, you can using this code (Settings > Developer Tools > Code Injection > Footer). 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<style>
	article>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;
        animation: fade_move_down 4s ease-in-out infinite;
    }
article>section:first-child a.next-section:before {
    content: "\e009";
    font-family: 'squarespace-ui-font';
    font-size: 50px;
}
/*animated scroll arrow animation*/
@-webkit-keyframes fade_move_down {
  0%   { -webkit-transform:translate(0,-10px); opacity: 0;  }
  50%  { opacity: 1;  }
  100% { -webkit-transform:translate(0,10px); opacity: 0; }
}
@-moz-keyframes fade_move_down {
  0%   { -moz-transform:translate(0,-10px); opacity: 0;  }
  50%  { opacity: 1;  }
  100% { -moz-transform:translate(0,10px); opacity: 0; }
}
@keyframes fade_move_down {
  0%   { transform:translate(0,-10px); opacity: 0;  }
  50%  { opacity: 1;  }
  100% { transform:translate(0,10px); opacity: 0; }
}
</style>
<script>
	$(function() {
      $("body.homepage #page>article>section:first-child").append('<a href="#" class="next-section"></a>');
      $('a.next-section').on('click', function(e) {
        e.preventDefault();
        $('html, body').animate({ scrollTop: $("body.homepage #page>article>section:first-child").next().offset().top}, 500, 'linear');
      });
    });
</script>

To change arrow color, change the line

color: #fff;

@tuanphan I really like this scroll down animation, thanks for sharing! Is there a way to replace the arrow with a custom png file?

I've also noticed the arrow seems slightly off centre. Is there a way to centre it? If needed, my website url is creativeboost.co.uk

On 2/20/2024 at 5:23 AM, FattyGuinness said:

@tuanphan I really like this scroll down animation, thanks for sharing! Is there a way to replace the arrow with a custom png file?

 

You can remove the code. I will test & give new code

Thanks @tuanphan, I've removed the code for now.

Use this new code, replace Pixabay with your image url

If problem still appears, you can keep the code I will check again easier

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(function() {
      $("body.homepage #page>article>section:first-child").append('<a href="#" class="next-section"><img src="https://cdn.pixabay.com/photo/2024/02/07/16/15/flower-8559381_1280.jpg" width="100px"/></a>');
      $('a.next-section').on('click', function(e) {
        e.preventDefault();
        $('html, body').animate({ scrollTop: $("body.homepage #page>article>section:first-child").next().offset().top}, 500, 'linear');
      });
    });
	</script>
	<style>
	article>section:first-child a.next-section {
      padding-top: 70px;
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      z-index: 2;
      display: inline-block;
      letter-spacing: .1em;
      text-decoration: none;
      transition: opacity .3s;
        animation: fade_move_down 4s ease-in-out infinite;
    }
/*animated scroll arrow animation*/
@-webkit-keyframes fade_move_down {
  0%   { -webkit-transform:translate(0,-10px); opacity: 0;  }
  50%  { opacity: 1;  }
  100% { -webkit-transform:translate(0,10px); opacity: 0; }
}
@-moz-keyframes fade_move_down {
  0%   { -moz-transform:translate(0,-10px); opacity: 0;  }
  50%  { opacity: 1;  }
  100% { -moz-transform:translate(0,10px); opacity: 0; }
}
@keyframes fade_move_down {
  0%   { transform:translate(0,-10px); opacity: 0;  }
  50%  { opacity: 1;  }
  100% { transform:translate(0,10px); opacity: 0; }
}
</style>

On 2/24/2024 at 8:11 AM, tuanphan said:

Use this new code, replace Pixabay with your image url

If problem still appears, you can keep the code I will check again easier

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(function() {
      $("body.homepage #page>article>section:first-child").append('<a href="#" class="next-section"><img src="https://cdn.pixabay.com/photo/2024/02/07/16/15/flower-8559381_1280.jpg" width="100px"/></a>');
      $('a.next-section').on('click', function(e) {
        e.preventDefault();
        $('html, body').animate({ scrollTop: $("body.homepage #page>article>section:first-child").next().offset().top}, 500, 'linear');
      });
    });
	</script>
	<style>
	article>section:first-child a.next-section {
      padding-top: 70px;
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      z-index: 2;
      display: inline-block;
      letter-spacing: .1em;
      text-decoration: none;
      transition: opacity .3s;
        animation: fade_move_down 4s ease-in-out infinite;
    }
/*animated scroll arrow animation*/
@-webkit-keyframes fade_move_down {
  0%   { -webkit-transform:translate(0,-10px); opacity: 0;  }
  50%  { opacity: 1;  }
  100% { -webkit-transform:translate(0,10px); opacity: 0; }
}
@-moz-keyframes fade_move_down {
  0%   { -moz-transform:translate(0,-10px); opacity: 0;  }
  50%  { opacity: 1;  }
  100% { -moz-transform:translate(0,10px); opacity: 0; }
}
@keyframes fade_move_down {
  0%   { transform:translate(0,-10px); opacity: 0;  }
  50%  { opacity: 1;  }
  100% { transform:translate(0,10px); opacity: 0; }
}
</style>

 

Thanks @tuanphan the centring was still slightly off but I added a negative left margin thats half of image width and now seems to be centred on desktop and mobile. Thanks for your help!

Hello Tuan!
Great code! I 'assumed' if by changing 'first' to 'second' I could replicate the script to perform the same way on the second section... but that did not work.

How do I replicate the arrow to apply it to a page with 3-4 sections?

Thank You in advance

On 4/14/2024 at 5:46 AM, authenticeye said:

Hello Tuan!
Great code! I 'assumed' if by changing 'first' to 'second' I could replicate the script to perform the same way on the second section... but that did not work.

How do I replicate the arrow to apply it to a page with 3-4 sections?

Thank You in advance

Have you adjusted all yet?

On 4/16/2024 at 8:29 AM, tuanphan said:

Have you adjusted all yet?

Hi @tuanphan

I am looking to achieve the same thing.

I would like to use the code to add a scroll button, ideally with my own svg. 

I would like the scroll button to be in the second section of my page. What would need to be changed in the image you posted to make this happen? 

Thanks

5 hours ago, JonnyIlsley said:

Hi @tuanphan

I am looking to achieve the same thing.

 

I would like to use the code to add a scroll button, ideally with my own svg. 

I would like the scroll button to be in the second section of my page. What would need to be changed in the image you posted to make this happen? 

 

Thanks

I have actually understood what needs to happen now, I have used nth-childs to target the correct sections.

My final question is can you set an offset in the ".offset{}" field? It feels like you should be able to but I am not seeing any effect. 

Thanks

On 4/24/2024 at 10:23 PM, JonnyIlsley said:

I have actually understood what needs to happen now, I have used nth-childs to target the correct sections.

 

My final question is can you set an offset in the ".offset{}" field? It feels like you should be able to but I am not seeing any effect. 

 

Thanks

You can use scroll-margin-top

https://www.w3schools.com/cssref/css_pr_scroll-margin-top.php

1 hour ago, tuanphan said:

You can use scroll-margin-top

https://www.w3schools.com/cssref/css_pr_scroll-margin-top.php

Hi @tuanphan,

Thank you, I assume this would be added to the CSS editor and target the class ".next-section"?

Also, it seems I am having trouble aligning the arrow. I am looking to align the arrow to the right hand side of my screen. I want it not to be on the edge of my screen but at the max right edge of my page width. So that the site margin is still there between the arrow and the edge of the screen. 

Would you be able to help me out with this? 

Thanks

On 4/26/2024 at 5:24 PM, JonnyIlsley said:

Hi @tuanphan,

 

Thank you, I assume this would be added to the CSS editor and target the class ".next-section"?

 

 

Also, it seems I am having trouble aligning the arrow. I am looking to align the arrow to the right hand side of my screen. I want it not to be on the edge of my screen but at the max right edge of my page width. So that the site margin is still there between the arrow and the edge of the screen. 

 

Would you be able to help me out with this? 

 

Thanks

Can you share link to page where you have problem? I can check problem easier

On 4/28/2024 at 8:06 AM, tuanphan said:

Can you share link to page where you have problem? I can check problem easier

Hi @tuanphan,

I have sent you a direct message with access to the site and more details.

Thanks

Hello this scroll works great, thank you… but can anyone help me with a way to tweak the code so that I can make the scroll function appear on other pages of my website, please? I need to have the scroll on most pages but not all. How do I adjust the code for this? The part of the code is shown below. FYI I'm new to code but discovered that by removing " body.homepage " before  " #page " it makes the scroll appear on every page. Therefore, by deduction, I'm assuming the defining element is " body.homepage" How would I alter this to include the other pages in my main navigation, but not linked pages?
 

Quote

      $("  body.homepage #page>article>section:first-child").append('<a href="#" class="next-section"></a>');
      $('a.next-section').on('click', function(e) {
        e.preventDefault();
        $('html, body').animate({ scrollTop: $(" body.homepage #page>article>section:first-child").next().offset().top}, 500, 'linear');
      });
    });  /* SCROLL ARROW HOME PAGE CODE ENDS */
</script>

On 5/2/2024 at 5:53 PM, AmeliaJ said:

Hello this scroll works great, thank you… but can anyone help me with a way to tweak the code so that I can make the scroll function appear on other pages of my website, please? I need to have the scroll on most pages but not all. How do I adjust the code for this? The part of the code is shown below. FYI I'm new to code but discovered that by removing " body.homepage " before  " #page " it makes the scroll appear on every page. Therefore, by deduction, I'm assuming the defining element is " body.homepage" How would I alter this to include the other pages in my main navigation, but not linked pages?
 

 

2 options
(1) Move code out of Sitewide Code Injection and add code to Individual Page Header Code Injection (page where you want to add it)

(2) Share link to all not linked page, I can add some exclude ID to your code

Thank you again @tuanphan. I opted for putting the code into the Individual Page Header Code Injection and it works perfectly.