markadekoning Posted July 4, 2022 Share Posted July 4, 2022 Site URL: https://www.coastalgrain2.squarespace.com.au Hey @tuanphan, I've used this code to add a scroll arrow to a few pages. <div class="scroll-down"></div> <style> .scroll-down { position: absolute; left: 50%; bottom: 10px; display: block; text-align: center; font-size: 20px; z-index: 100; text-decoration: none; text-shadow: 0; width: 13px; height: 13px; border-bottom: 2px solid white; border-right: 2px solid white; z-index: 9; left: 50%; -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> I want to position the arrow near the bottom of the section block it's placed in. I've tried using 'spacers' but this just stretches out the section - is it possible to position the arrow without stretching or changing the structure of the section? The issue is really just on the home page in the top section. Cheers, Mark Link to comment
markadekoning Posted July 4, 2022 Author Share Posted July 4, 2022 UPDATE: I've moved the code to page header injection, which has positioned it at the bottom, but now it's sitting a little low! haha, any way to bump it up a little bit? Thanks! Link to comment
markadekoning Posted July 4, 2022 Author Share Posted July 4, 2022 Problem solved: just edited the code: bottom: 40px; Thanks anyway! 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