Back-to-Top Button
Tiny Auto-Inject Back to Top Button
This snippet adds a tiny floating Back to Top button to any page without editing your HTML. Drop it into your layout and it quietly watches the scroll position. When a visitor scrolls down a bit, the button fades in at the bottom-right corner. One click and the page scrolls back to the top in a smooth, native way.
It is designed to be minimal, friendly, and predictable: no surprise windows, no intrusive overlays, no external dependencies, and no extra requests. It simply helps people get back to the start of your content faster, especially on long pages or mobile layouts.
What this snippet does
The script auto-injects a small circular button into <body> once
the page is ready. At first the button stays hidden. As soon as the visitor scrolls
past a configurable distance, it becomes visible and clickable. When the visitor
scrolls back up near the top, the button disappears again so it doesn’t clutter
the screen.
On click, the script scrolls the window back to the top. Modern browsers get a clean smooth-scroll animation. Older browsers or visitors who prefer reduced motion fall back to an instant jump, so the behavior stays simple and accessible.
Why use a back to top button?
- Long tutorials, articles, or docs where scrolling to the top is tedious.
- Layouts with lots of sections on one page.
- Mobile views where the scrollbar isn’t always obvious.
- Static or “one-page” sites that need a lightweight usability boost.
Because this helper only scrolls inside your page and never opens new windows or overlays, it stays compatible with normal content and display ads. It does not interfere with ad behavior or cover ad placements.
Copy-paste snippet (CSS + JavaScript)
You can drop this block near the end of your layout or theme file. Once included, every page that uses that layout will automatically get the Back to Top button.
<style>
/* Vibe Back-to-Top (auto-inject) */
.vibe-btt {
position: fixed;
right: 14px;
bottom: 14px;
z-index: 9999;
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 999px;
border: 1px solid rgba(0,0,0,0.15);
background: #F9FAFF;
color: #000;
font: 700 16px/1 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
text-decoration: none;
cursor: pointer;
user-select: none;
box-shadow: 0 6px 16px rgba(0,0,0,0.08);
opacity: 0;
transform: translateY(6px);
pointer-events: none;
transition: opacity .18s ease, transform .18s ease, background .18s ease, border-color .18s ease;
}
.vibe-btt.is-visible {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.vibe-btt:hover {
background: #F2F4FF;
border-color: rgba(168,41,167,0.45);
}
.vibe-btt:active {
transform: translateY(1px);
}
.vibe-btt:focus-visible {
outline: 2px solid #A829A7;
outline-offset: 3px;
}
/* Optional tiny label style if you switch to text */
.vibe-btt--text {
width: auto;
padding: 0 12px;
gap: 6px;
}
/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
.vibe-btt {
transition: none;
}
}
</style>
<script>
// Vibe Back-to-Top (auto-inject, no deps)
(function () {
// --- CONFIG ---
var SHOW_AFTER_PX = 260; // when to show the button
var USE_TEXT = false; // set true for "Top" text button
var BUTTON_LABEL = "Back to top";
// --------------
// Avoid double-inject
if (document.querySelector('.vibe-btt')) return;
var btn = document.createElement('button');
btn.type = 'button';
btn.className = 'vibe-btt';
btn.setAttribute('aria-label', BUTTON_LABEL);
btn.title = BUTTON_LABEL;
if (USE_TEXT) {
btn.classList.add('vibe-btt--text');
btn.innerHTML = '↑ <span>Top</span>';
} else {
btn.textContent = '↑';
}
document.addEventListener('DOMContentLoaded', function () {
document.body.appendChild(btn);
update();
});
function prefersReducedMotion() {
return window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
}
function scrollToTop() {
// Smooth if allowed
try {
if (!prefersReducedMotion() && 'scrollBehavior' in document.documentElement.style) {
window.scrollTo({ top: 0, behavior: 'smooth' });
return;
}
} catch (e) {}
// Fallback
window.scrollTo(0, 0);
}
btn.addEventListener('click', function () {
scrollToTop();
});
// Basic throttle for scroll
var ticking = false;
function update() {
var y = window.pageYOffset || document.documentElement.scrollTop || 0;
if (y > SHOW_AFTER_PX) {
btn.classList.add('is-visible');
} else {
btn.classList.remove('is-visible');
}
ticking = false;
}
window.addEventListener('scroll', function () {
if (ticking) return;
ticking = true;
window.requestAnimationFrame(update);
}, { passive: true });
window.addEventListener('resize', function () {
if (ticking) return;
ticking = true;
window.requestAnimationFrame(update);
});
})();
</script>How to install
- Copy the entire snippet above, including the
<style>and<script>tags. - Paste it into your main layout or theme file, just before the closing
</body>tag. - Deploy your changes and open a page that uses that layout.
- Scroll down. Once you pass the configured threshold, the Back to Top button should fade in.
The script runs on any page that includes it. If you only want the button on certain sections of your site (for example, long blog posts or docs), include the snippet only in those templates.
Customizing the button
Size & shape
Want a larger button? Adjust the width and height values
in the CSS. You can also tweak the border radius, shadow, or colors to match your
design system.
Scroll distance
The SHOW_AFTER_PX setting controls how far the visitor must scroll
before the button appears. Lower it if you want the button to show up sooner, or
raise it if you only want it on deep scrolls.
Text vs icon
Prefer a small pill that says “Top”? Set USE_TEXT = true in the config.
That switches the button into text mode using the .vibe-btt--text style.
You can also adjust BUTTON_LABEL to change the accessible label and
tooltip text.
Accessibility and reduced motion
The script respects the visitor’s prefers-reduced-motion setting. If a
user has requested less motion at the system level, the scroll action falls back to
an instant jump. This helps keep things comfortable for people who are sensitive to
animation or motion.
You can also customize the label and ARIA attributes to better describe what the button does, for example “Back to the top of this page”. Clear labels make the control easier to understand for screen reader users.
Where this works best
This Back to Top helper is intentionally small and self-contained, which makes it a good fit for static sites, simple blogs, documentation pages, and “vibe-coded” projects that want a quick usability win without pulling in a big UI library.
There’s no backend, no tracking, and no HTML edits required: just copy, paste, and enjoy an easier way for visitors to get back to the start of your content.
Comments (0)
No comments yet — be the first.