MattyT208 Posted May 17, 2022 Share Posted 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? Link to comment
tuanphan Posted May 20, 2022 Share Posted 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> Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
MattyT208 Posted May 24, 2022 Author Share Posted 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. Link to comment
tuanphan Posted May 26, 2022 Share Posted 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 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
MattyT208 Posted May 26, 2022 Author Share Posted May 26, 2022 10 hours ago, tuanphan said: Move code to Homepage Header Thank you! Link to comment
MattyT208 Posted June 1, 2022 Author Share Posted 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> Link to comment
tuanphan Posted June 2, 2022 Share Posted 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 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
MattyT208 Posted June 2, 2022 Author Share Posted 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 Link to comment
tuanphan Posted June 3, 2022 Share Posted 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); } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
MattyT208 Posted June 3, 2022 Author Share Posted 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. Link to comment
MattyT208 Posted June 6, 2022 Author Share Posted 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). Link to comment
tuanphan Posted June 11, 2022 Share Posted 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); } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
MattyT208 Posted June 13, 2022 Author Share Posted 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. Link to comment
tuanphan Posted June 14, 2022 Share Posted 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? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
MattyT208 Posted June 14, 2022 Author Share Posted 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. Link to comment
tuanphan Posted June 15, 2022 Share Posted 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 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
MattyT208 Posted June 15, 2022 Author Share Posted 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. Link to comment
Angela788 Posted June 16, 2022 Share Posted 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 Link to comment
tuanphan Posted June 16, 2022 Share Posted 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; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
MattyT208 Posted June 16, 2022 Author Share Posted 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. Link to comment
_yohandeschamps_ Posted August 16 Share Posted August 16 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 Link to comment
tuanphan Posted August 19 Share Posted August 19 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> Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care 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