DEMO
Native scroll to top button
A template demo for a scroll-to-top floating button for Carrd sites, using only native Carrd elements and some custom CSS style. You can set the button to scroll to top of your site, or to any scroll point on the page. Click on the bottom-right button to see the scrolling action. 👇Made by @jasonleowsg.📣 Btw new Carrd plugin released: Mega nav bar
01.
Bibendum enim
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam posuere, massa eget accumsan elementum, mi mi suscipit nunc, eget pretium justo diam id diam. Cras facilisis efficitur metus nec facilisis. Nulla eget massa nisi. Mauris ac ipsum non eros vulputate facilisis sed id risus. Donec vulputate porttitor condimentum. Fusce mattis at nunc in rhoncus. Donec diam nulla, sagittis quis aliquam id, molestie eu ipsum. Donec fringilla tempor mattis. Duis consequat quis ante eu efficitur. Maecenas facilisis, nisl ut porta dictum, purus erat tincidunt odio, ut pellentesque metus velit ac nisl. Vestibulum eget faucibus ex. Morbi vulputate posuere rhoncus. Praesent placerat et felis ac condimentum. Vivamus a maximus enim. Nullam tristique, ante at lobortis facilisis, sem dolor sodales eros, eu malesuada magna augue et quam.Aliquam convallis varius metus, sit amet egestas leo consequat ut. Sed condimentum, elit suscipit consequat pretium, purus purus vehicula quam, ut sagittis lorem eros nec justo. Mauris lacinia, ligula ac rhoncus sollicitudin, lorem risus lobortis metus, ac mattis neque tortor in nunc. Mauris nunc tellus, accumsan at sem non, ornare malesuada dolor. In arcu arcu, malesuada fringilla venenatis mattis, porta non nulla. Donec nec nunc diam. Donec hendrerit nisl non euismod pulvinar. Pellentesque et ullamcorper enim. Nullam condimentum dapibus erat vel mattis. Curabitur vel nulla a lectus mollis bibendum. Vivamus vel quam consectetur, faucibus mauris at, scelerisque est.Phasellus ornare vitae quam vel vestibulum. Fusce non posuere risus, rutrum convallis nulla. Mauris nec lectus turpis. Nulla luctus eros in turpis facilisis, nec eleifend nunc pretium. Nullam turpis libero, fermentum ut felis consectetur, congue aliquet ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent laoreet, sem ut porta ultrices, neque sem dignissim justo, vitae dignissim leo erat vel dui. Nunc velit magna, semper at placerat sed, ultricies cursus lacus. Aliquam vehicula massa dolor. Etiam dui tellus, molestie luctus mi vel, posuere placerat augue.
© Jason's Plugins For Carrd. All rights reserved.
Tutorial
How to create this scroll-to-top button in your Carrd site
- Add a Control element at top of your site, change Type to Header Marker- Add a Button element above the Header element (this ensures your button will show up on every Section, not just home page).- Google for "up arrow unicode" and copy paste the up arrow symbol into the Label field of the Button element. For URL field, type browser:top- Under Appearance > Style for the Button element, set to Label Only. Set Width, height, Corner Rounding to 2 or 3 (to get round button).- Under Appearance > Mobile, set it to Manual. Change Layout to Default, Width and Size to Auto.- Under Settings > Style > Default, Mobile, paste this CSS code to both default and mobile fields to affix the button at bottom right corner of carrd site:position: fixed;- Publish, done!- If you prefer the ease of just copy-pasting custom code into a single Embed element, or if you're familiar with basic HTML, CSS, and want some customizability, there's a free template here: https://scrolltotop.carrd.co/
bottom: 20px;
right: 30px;
z-index: 99;