-
AuthorPosts
-
November 30, 2021 at 10:45 pm #1331045
Hi!
When adding a content section you can add an arrow to scroll down to the next content section.
Is there a way to create the same arrow on top of the page to scroll back to the content section above?
Best regards,
VincentDecember 1, 2021 at 11:04 am #1331117Hey vincentvanderwielen,
Thank you for the inquiry.
The option is not available out of the box, but you can add the arrow or the html for it manually using a text or code block and apply an anchor to it. You can also use the Icon or Button element. You will have to apply a unique ID to each color section in the page.
Best regards,
IsmaelDecember 2, 2021 at 9:32 pm #1331359Hi Ismael,
Thank you for your reply.
I do not know much about html.
Can you gibe me a hind where to find a code to get the arrow on top of the page?Beste regards,
VincentDecember 4, 2021 at 3:38 pm #1331544Hi,
To have a Scroll Up to Next Section Arrow try pasting this is a code block element at the top of your color section:
<a href="#intro" title="" class="scroll-up-link av-control-hidden" aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello"></a>
adjust the link to the custom ID of the section above #intro please note that every ID can only be used once on a page, so every arrow needs a different link.
Then add this code in the General Styling ▸ Quick CSS field or in the WordPress ▸ Customize ▸ Additional CSS field:#top .scroll-up-link { height: 60px; width: 80px; margin: 0px 0 0 -40px; line-height: 60px; position: absolute; left: 49.85%; top: 0px; color: #FFF; text-align: center; font-size: 70px; z-index: 100; text-decoration: none; text-shadow: 0px 0px 3px rgb(0 0 0 / 40%); -webkit-animation: custom_fade_move_up 2s ease-in-out infinite; animation: custom_fade_move_up 2s ease-in-out infinite; } /*animated arrow animattion*/ @-webkit-keyframes custom_fade_move_up { 0% { -webkit-transform:translate(0,20px); opacity: 0; } 50% { opacity: 1; } 100% { -webkit-transform:translate(0,-20px); opacity: 0; } } @keyframes custom_fade_move_up { 0% { transform:translate(0,20px); opacity: 0; } 50% { opacity: 1; } 100% { transform:translate(0,-20px); opacity: 0; } }
Then clear your browser cache and any cache plugin, and check.
the expected results:
Best regards,
MikeDecember 5, 2021 at 4:27 pm #1331604Hi Mike,
Thank you so much for giving me directions!
I still have to tweak it a bit, but it works perfectly.Best regards,
VincentDecember 5, 2021 at 4:32 pm #1331606Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.Best regards,
Mike -
AuthorPosts
- The topic ‘Scroll up arrow content section’ is closed to new replies.