How to Add Back To Top Button on Carrd Website

Dragos
February 28, 2024
- Cms

Carrd.co 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.

Carrd.co

Some Carrd Tutorials:

The complete list with Carrd plugins, themes and tutorials you can find on my carrdme.com 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:

2. Use the HTML Code:

Below is the code you should use with the explination:

<style>
  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);
  }
</style>

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

<script>
  window.onscroll = function () {
    scrollFunction();
  };

  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;
  }
</script>

Colors

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.

Size

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.

Position

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.
Carrd.co