How to Add Back To Top Button on Carrd Website

How to Add Back To Top Button on Carrd Website offers a good way to build one-page websites but one-page websites can have a lot of elements and in case the visitors need to go back to the top they will scroll a lot. That’s an issue for most websites but this can be fixed easily with the help of a code and embed functionality in carrd.

Some Carrd Tutorials:

The complete list with Carrd plugins, themes and tutorials you can find on my website.

How to Add Back To Top Button on Carrd Website

1. Add an embed element anywhere on the website

You just need to go on the + sign and add an Embed element anywhere on the website. Below you will

  • Type: Code
  • Style: Hidden, Head

Just as in below picture:

Carrd back to top

2. Use the HTML Code:

Below is the code you should use with the explination:

  html {
    scroll-behavior: smooth;

  /* CSS Variables for customization */
  :root {
    --button-color: #555;
    --button-hover-color: #333;
    --arrow-color: white;

  #scroll-to-top {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 99;
    width: 50px;
    height: 50px;
    background-color: var(--button-color);
    color: var(--arrow-color);
    border: none;
    outline: none;
    cursor: pointer;
    border-radius: 50%;

  #scroll-to-top::before {
    content: "\25b2";
    font-size: 24px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

  #scroll-to-top:hover {
    background-color: var(--button-hover-color);

<button id="scroll-to-top" onclick="scrollToTop()"></button>

  window.onscroll = function () {

  function scrollFunction() {
    if (
      document.body.scrollTop > 200 ||
      document.documentElement.scrollTop > 200
    ) {
      document.getElementById("scroll-to-top").style.display = "block";
    } else {
      document.getElementById("scroll-to-top").style.display = "none";

  function scrollToTop() {
    document.body.scrollTop = 0;
    document.documentElement.scrollTop = 0;


  • Background Colors:

    • Change the --button-color variable to modify the button’s default background color.
    • Change the --button-hover-color variable to modify the background color when you hover over the button.
  • Arrow Color:

    • Change the --arrow-color variable to modify the color of the upward arrow within the button.


  • Width & Height:

    • Find the CSS rule #scroll-to-top and adjust the width and height properties to control the button’s size (they are currently set to 50px).
  • Arrow Size:

    • Within the #scroll-to-top::before rule, modify the font-size property to adjust the size of the arrow symbol.


  • Bottom & Right Offset:

    • In the #scroll-to-top rule, modify the bottom and right properties to control the button’s distance from the bottom-right corner of the screen.


This is how easy it is to add a back to top button on your Carrd website, you can customize it easily to fit your designs.