Will_R_1992 Posted January 30 Share Posted January 30 On the homepage, I've managed to create a white downward bouncing arrow—found on other threads. But would like this to be clickable, so it moves down to the next section. Smoothly, and without refreshing the page. Is this possible without upgrading to the "Business" plan? I'm assuming this requires some sort of Javascript?https://gerbil-soybean-w6m2.squarespace.com/ password: highwycombe Link to comment
Will_R_1992 Posted January 30 Author Share Posted January 30 forgot to add the code: <div class="scroll-down"></div> <style> .scroll-down { position: relative; top: 210px; left: 0px; left: 0%; bottom: 0px; display: block; text-align: left; font-size: 20px; z-index: 100; text-decoration: none; text-shadow: 0; width: 40px; height: 40px; border-bottom: 3px solid white; border-right: 3px solid white; z-index: 9; left: 10%; -webkit-transform: translate(-50%, 0%) rotate(45deg); -moz-transform: translate(-50%, 0%) rotate(45deg); transform: translate(-50%, 0%) rotate(45deg); -webkit-animation: fade_move_down 4s ease-in-out infinite; -moz-animation: fade_move_down 4s ease-in-out infinite; animation: fade_move_down 4s ease-in-out infinite; } /*animated scroll arrow animation*/ @-webkit-keyframes fade_move_down { 0% { -webkit-transform:translate(0,-10px) rotate(45deg); opacity: 0; } 50% { opacity: 1; } 100% { -webkit-transform:translate(0,10px) rotate(45deg); opacity: 0; } } @-moz-keyframes fade_move_down { 0% { -moz-transform:translate(0,-10px) rotate(45deg); opacity: 0; } 50% { opacity: 1; } 100% { -moz-transform:translate(0,10px) rotate(45deg); opacity: 0; } } @keyframes fade_move_down { 0% { transform:translate(0,-10px) rotate(45deg); opacity: 0; } 50% { opacity: 1; } 100% { transform:translate(0,10px) rotate(45deg); opacity: 0; } } </style> Link to comment
tuanphan Posted February 2 Share Posted February 2 First, change this line <div class="scroll-down"></div> to this <a class="scroll-down" href="#next-section"></a> Next, add a Code Block above (or over) this text Paste this code into Code Block <span id="next-section"></span> Will_R_1992 1 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
Will_R_1992 Posted February 6 Author Share Posted February 6 Thank you. Is it possible to do this, without refreshing the page? and pushing down to the section? Thanks Link to comment
tuanphan Posted February 7 Share Posted February 7 On 2/6/2023 at 5:11 PM, Will_R_1992 said: Thank you. Is it possible to do this, without refreshing the page? and pushing down to the section? Thanks #1. It looks fine to me. You try checking it again #2. What do you mean? 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