qeys Posted July 18, 2023 Share Posted July 18, 2023 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 you help me with this please? Link to comment
MayaViolet Posted July 19, 2023 Share Posted July 19, 2023 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. Link to comment
tuanphan Posted July 19, 2023 Share Posted July 19, 2023 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; bs1 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
FattyGuinness Posted February 19 Share Posted February 19 @tuanphan I really like this scroll down animation, thanks for sharing! Is there a way to replace the arrow with a custom png file? Link to comment
FattyGuinness Posted February 19 Share Posted February 19 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 Link to comment
tuanphan Posted February 21 Share Posted February 21 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 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
FattyGuinness Posted February 21 Share Posted February 21 Thanks @tuanphan, I've removed the code for now. Link to comment
tuanphan Posted February 24 Share Posted February 24 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> Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
FattyGuinness Posted March 18 Share Posted March 18 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! tuanphan and bs1 2 Link to comment
authenticeye Posted April 13 Share Posted April 13 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 Link to comment
tuanphan Posted April 16 Share Posted April 16 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? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
JonnyIlsley Posted April 24 Share Posted April 24 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 Link to comment
JonnyIlsley Posted April 24 Share Posted April 24 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 Link to comment
tuanphan Posted April 26 Share Posted April 26 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 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
JonnyIlsley Posted April 26 Share Posted April 26 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 Link to comment
tuanphan Posted April 28 Share Posted April 28 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 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
JonnyIlsley Posted April 29 Share Posted April 29 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 Link to comment
AmeliaJ Posted May 2 Share Posted May 2 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> Link to comment
tuanphan Posted May 4 Share Posted May 4 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 AmeliaJ 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
AmeliaJ Posted May 5 Share Posted May 5 Thank you again @tuanphan. I opted for putting the code into the Individual Page Header Code Injection and it works perfectly. tuanphan 1 Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment