Introducing the UioveX Scroll: The Ultimate Dynamic Scroll Button for Blogger
In today's digital landscape, a seamless user experience (UX) is paramount. A smooth, intuitive navigation system can significantly reduce bounce rates and keep your visitors engaged for longer. One of the most elegant solutions for lengthy content is a "Back to Top" button. But what if we could make it smarter, more dynamic, and visually stunning? That's why we at UioveX are thrilled to release the UioveX Universal Scroll Button – a dynamic, beautifully animated scroll utility designed to work flawlessly on any Blogger theme.
Inspired by the fluid navigation found in modern native applications, this isn't just a simple button. It’s an intelligent tool that enhances your site's navigation by providing dual functionality in a single, stylish, and compact package.
Why UioveX Scroll is a Game-Changer for Your Blog
This powerful yet lightweight tool is packed with cutting-edge features designed to elevate your blog's user experience and overall aesthetic appeal.
- Dynamic Dual-Functionality: Intelligently switches between a "Scroll to Bottom" (Down Arrow) and "Scroll to Top" (Up Arrow) button based on the user's position on the page.
- Animated Circular Progress Bar: A sleek, circular progress bar animates around the button, visually indicating the user's scroll depth in real-time.
- Universal Compatibility: Built with pure, dependency-free code, it works flawlessly on ANY Blogger theme, new or old, without conflicts.
- Theme-Aware & Dark Mode Ready: Automatically adapts to the user's system preferences for Light or Dark Mode, ensuring a seamless look on every device.
- Butter-Smooth Scrolling: Utilizes native smooth scrolling for a modern and pleasant navigation experience.
- Extremely Lightweight & Fast: Optimized for performance, ensuring it won’t add any noticeable load time to your website.
Installation Guide: A Simple Two-Step Process
Integrating the UioveX Scroll button into your blog is incredibly straightforward. You don't need to be a coding expert! Just follow these two simple steps to get it up and running.
-
Add the HTML & JavaScript Code
This is the core of the button. It creates the button's structure and contains the powerful logic for its dynamic behavior, including the icon switching and progress bar animation.
Crucial Step: For optimal performance, this entire code block should be placed right before the closing</body>tag in your theme's HTML. This ensures all your page content loads before the script runs. -
Add the CSS Code
This code handles all the styling that makes the button look beautiful. It controls the appearance, the animations, and the automatic color changes for dark mode.
Pro Tip: The recommended way to add this is via the Blogger Theme Customizer. Go to Theme → Customize → Advanced → Find "Add CSS" from the dropdown, and paste the CSS code provided below into the custom CSS box.
The Universal Code Snippets
Here are the complete code snippets you'll need. Just copy and paste them according to the instructions above to bring this amazing feature to life on your blog.
Step 1: HTML & JavaScript Code
Go to your Blogger Theme Editor, find the </body> tag (it's usually at the very end), and paste the following code right **before** it.
<!-- Universal UioveX Scroll Button by SAM (UioveX) - Start -->
<div class="tTb" id="UioveXSmartScroll">
<svg viewBox="0 0 36 36">
<circle class="track" cx="18" cy="18" r="15.9" stroke-width="2.5"></circle>
<circle class="progress" cx="18" cy="18" r="15.9" stroke-width="2.5"></circle>
<g class="arrow-down">
<path d="M18 8 V 26 M 13 21 L 18 26 L 23 21" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<g class="arrow-up">
<path d="M18 28 V 10 M 13 15 L 18 10 L 23 15" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</g>
</svg>
</div>
<script type='text/javascript'>
//<![CDATA[
(function() {
"use strict";
const scrollButton = document.getElementById('UioveXSmartScroll');
if (!scrollButton) return;
const progressCircle = scrollButton.querySelector('.progress');
const circumference = 2 * Math.PI * progressCircle.r.baseVal.value;
progressCircle.style.strokeDasharray = circumference;
const handleScroll = () => {
const scrollTop = window.scrollY || document.documentElement.scrollTop;
const scrollHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
const scrollPercentage = (scrollHeight > 0) ? (scrollTop / scrollHeight) * 100 : 0;
scrollButton.style.setProperty('--progress', scrollPercentage);
if (scrollTop < 50) {
scrollButton.classList.add('scroll-at-top');
scrollButton.setAttribute('aria-label', 'Scroll Down');
} else {
scrollButton.classList.remove('scroll-at-top');
scrollButton.setAttribute('aria-label', 'Scroll to Top');
}
};
const handleClick = () => {
const isAtTop = scrollButton.classList.contains('scroll-at-top');
window.scrollTo({
top: isAtTop ? document.body.scrollHeight : 0,
behavior: 'smooth'
});
};
window.addEventListener('scroll', handleScroll, { passive: true });
scrollButton.addEventListener('click', handleClick);
handleScroll();
})();
//]]>
</script>
<!-- Universal UioveX Scroll Button by SAM (UioveX) - End -->
Step 2: CSS Code
Copy the complete CSS code from the box below and add it to your theme's custom CSS area.
/* Universal UioveX Scroll Button by SAM (UioveX) - https://www.uiovex.top */
:root {
--uiovex-scroll-primary-color: #0d6efd;
--uiovex-scroll-light-bg: #ffffff;
--uiovex-scroll-light-track: #e9ecef;
--uiovex-scroll-light-icon: #343a40;
--uiovex-scroll-dark-bg: #212529;
--uiovex-scroll-dark-track: #495057;
--uiovex-scroll-dark-icon: #f8f9fa;
}
.tTb{--progress:0;position:fixed;bottom:20px;right:20px;z-index:9999;display:flex;border-radius:50%;cursor:pointer;width:50px;height:50px;box-shadow:0 5px 20px rgba(0,0,0,0.1);transition:transform .3s ease;color:var(--uiovex-scroll-light-icon);}.tTb:hover{transform:scale(1.1);}.tTb svg{width:100%;height:100%;transform:none;}.tTb circle.track{fill:var(--uiovex-scroll-light-bg);stroke:var(--uiovex-scroll-light-track);}.tTb circle.progress{transform:rotate(-90deg);transform-origin:50% 50%;fill:none;stroke:var(--uiovex-scroll-primary-color);stroke-dasharray:100;stroke-dashoffset:calc(100 - var(--progress));transition:stroke-dashoffset 0.2s linear;}.tTb path{stroke:currentColor;}.tTb .arrow-up{display:block;opacity:1;transition:opacity .3s ease;}.tTb .arrow-down{display:none;opacity:0;transition:opacity .3s ease;}.tTb.scroll-at-top .arrow-up{display:none;opacity:0;}.tTb.scroll-at-top .arrow-down{display:block;opacity:1;}
@media (prefers-color-scheme: dark){
body:not(.light-mode) .tTb{color:var(--uiovex-scroll-dark-icon);}
body:not(.light-mode) .tTb circle.track{fill:var(--uiovex-scroll-dark-bg);stroke:var(--uiovex-scroll-dark-track);}
}
@media (max-width: 768px){.tTb{width:45px;height:45px;bottom:80px;right:15px;}}
Customization Options
You can easily customize the primary color of the button and its progress bar to match your brand. Simply find and change the color code in the CSS you added.
| Variable Name | Description | Default Value |
|---|---|---|
--uiovex-scroll-primary-color |
Changes the color of the progress bar and other primary elements. | #0d6efd (Blue) |
--uiovex-scroll-light-bg |
Changes the button's background color in Light Mode. | #ffffff (White) |
--uiovex-scroll-dark-bg |
Changes the button's background color in Dark Mode. | #212529 (Dark Gray) |
Final Words & Feedback Request
And that's it! With these two simple copy-paste steps, you have successfully integrated a highly professional and dynamic scroll button into your blog. This small but powerful addition can make a huge difference in how users navigate and perceive your site's quality.
We are dedicated to creating top-tier, universal tools for the Blogger community. Did you find this tutorial helpful? Is there another feature or a different style of widget you would love to see? Share your valuable thoughts and suggestions in the comments section below. Your feedback is what inspires our next creation!
