Add a floating back-to-top button on Weebly

A long Weebly page can leave visitors stranded at the bottom, especially on a phone. If you want to learn how to add a floating back-to-top button on Weebly, a small arrow that appears during scrolling gives readers an immediate way to return to the header, navigation or featured content. It is useful on articles, lookbooks, portfolios and service pages that combine detailed copy with an enquiry form.

The control is not a standard Weebly page element, but it can be created with a compact HTML, CSS and JavaScript block. No third-party plugin is required. This My Weebly Tricks guide explains where to place the code, how the behaviour works and how to adapt the button for an Australian audience without distracting from the page.

Why a floating back-to-top button helps

Mobile browsing is a routine part of using websites in Australia, making a floating control especially valuable on a phone. People may be reading a Weebly article during a commute on Sydney or Melbourne trains, scrolling through a café menu on a tablet or browsing between other tasks. A thumb-friendly arrow removes the need to flick through a long screen just to find the main menu.

It can also improve the flow of content-heavy pages. A visitor who reaches the end of an article, product range or portfolio is already engaged; an easy route back to the top makes it simpler to explore another section. For a Melbourne café or a Brisbane trade business, that extra moment of navigation may lead to a menu, service area or enquiry form.

Keep it small and purposeful. The button should complement the site’s design, not compete with calls to action, live chat or promotional banners. When it appears only after scrolling, it stays out of the way until it becomes relevant.

Plan the button before writing code

Deciding when the control should appear comes before styling it. A threshold around 500 pixels gives the page room to establish its heading and introduction. The supplied script uses that distance, but you can change 500 to 300 for a shorter page or 800 for a very long article. Test the result rather than choosing a value without considering the page length.

Position it where a thumb is likely to land without covering important content. The lower-right corner is familiar on mobile screens, yet the bottom of a page may already contain a cookie notice, chat bubble or sales widget. Leave enough clearance and test the button with every persistent element you use.

Choose an icon and shape that match your theme. A circle with an upward arrow is clear and unobtrusive, while a square can suit a minimalist layout. Avoid animation that spins, bounces or flashes, because movement can distract readers with vestibular sensitivities.

Install the button on your Weebly site

Sign in to Weebly, open your site’s dashboard and choose Edit Site. Look for a Header or Footer code field if your plan and current editor provide one. If it is available, pasting the block there applies it site-wide. Otherwise, add an Embed or Custom HTML element to the shared footer layout or the page where you want the control.

<style>
  .wbt-back-to-top {
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: 52px;
    height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    padding: 0;
    border-radius: 50%;
    background: #1f4e79;
    color: #ffffff;
    font-size: 1.5rem;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(10px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 9999;
  }

  .wbt-back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }

  .wbt-back-to-top:hover {
    background: #163a5c;
  }

  .wbt-back-to-top:focus-visible {
    outline: 3px solid #ffbf47;
    outline-offset: 3px;
  }

  @media (max-width: 600px) {
    .wbt-back-to-top {
      right: 14px;
      bottom: 14px;
      width: 46px;
      height: 46px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .wbt-back-to-top {
      transition: none;
    }
  }
</style>

<button type="button" class="wbt-back-to-top" aria-label="Back to top">
  <span aria-hidden="true">↑</span>
</button>

<script>
  (function () {
    var button = document.querySelector(".wbt-back-to-top");

    if (!button) return;

    function updateButton() {
      button.classList.toggle("is-visible", window.scrollY > 500);
    }

    window.addEventListener("scroll", updateButton, { passive: true });

    button.addEventListener("click", function (event) {
      event.preventDefault();

      var reduceMotion = window.matchMedia(
        "(prefers-reduced-motion: reduce)"
      ).matches;

      window.scrollTo({
        top: 0,
        behavior: reduceMotion ? "auto" : "smooth"
      });
    });

    updateButton();
  })();
</script>

Paste the entire block into the code element, including the style, button and script tags. Do not paste it into an ordinary rich-text paragraph, because the editor may strip or escape active code. Keep the three parts together so the page can style the control, reveal it and respond to a click.

The button uses position: fixed, so its placement does not depend on where the code sits in the document flow. The script also checks the scroll position immediately, preventing a stale visible state when someone opens the page partway down.

Save your changes, publish the site and open the live version. If nothing appears, check the browser console and confirm that the element is present in the published HTML. A simple custom-code block should not trigger plugin conflicts.

Match the button to your site

The default colours are deliberately plain: a dark blue background, white arrow and soft shadow. Change background and color to match your palette while checking that the result retains strong contrast. The focus ring uses amber so keyboard users can see the control clearly against the page.

Adjust width, height, right and bottom to suit the design. The media query already reduces the circle from 52 to 46 pixels on screens narrower than 600 pixels, a useful range for many Australian phones. Increase z-index only if another fixed element covers the button.

Keep the visible label in the code’s aria-label, even if the arrow is hidden from screen readers. You can use a different symbol or short wording as long as the meaning remains clear. For broader reference on restrained personal-site design, Phil Solomon’s site is a useful starting point.

Check behaviour, accessibility and performance

On a published page, scroll beyond 500 pixels and confirm the button fades in. Click it and check that the page returns to the top without a sudden jump. Repeat the action on a long article, a gallery and a form page, since layout height and embedded media can affect scrolling.

Use a keyboard to test accessibility. Press Tab until the arrow receives focus, then press Enter or Space. The amber outline should appear, the control should be large enough to operate and the click should leave focus somewhere sensible near the top of the document. The script also honours reduced-motion settings.

The implementation is deliberately light: it uses native browser scrolling and one scroll listener, with no jQuery or external icon file. That keeps requests down for visitors using mobile connections and reduces the chance of slowing a photography portfolio or another media-heavy Weebly site.

Useful checks before publishing

Use these two quick checks before the final publish. They cover the control itself and the wider Weebly page.

Button and interaction checks

• Scroll past 500 pixels and confirm the button appears only after that point.
• Activate it with a mouse, finger and keyboard, then verify that each action returns to the top.
• Resize the browser to phone and desktop widths and check for overlapping elements.
• Confirm the arrow has an accessible label and a visible focus outline.

Then check the wider site and the way Australian visitors may arrive. A repeated script can create two buttons, while an unpublished test can hide an otherwise working change.

Publishing and page checks

• Publish the site and test a live page in a private browser window.
• Check the button on at least one long article, portfolio page and contact page.
• Search the theme and footer for duplicate custom-code blocks before adding another.
• Confirm labels use Australian spelling, such as customise, and that the domain and contact details are correct.

For local reach, make sure a .com.au address, service suburbs and phone details are easy to find, since many small businesses arrive from Google Business Profile. Instagram and Facebook links can also direct people to the long page that needs the button. The Weebly signup guide shows how to add an email signup without a plugin.

Invite visitors to stay connected

The return link solves a navigation problem, while email gives visitors a reason to return. After a reader reaches the end of a guide, a clear invitation to receive updates can turn that visit into an ongoing relationship. For a broader marketing case, the value of custom email explains how a branded inbox can support a growing Australian business.

If you collect addresses, ask for clear consent, explain how often people will hear from you and make the form easy to find. Australian privacy and anti-spam expectations matter here, so describe the purpose of the list instead of relying on vague wording. A useful signup form also confirms that the address was received and links to the email preferences page.

Add the button to one of your longest pages today, publish it and test it on the phone your visitors use most. Then guide readers towards your services, newsletter and the next piece of content worth reading.