Jose Varghese

<p>Improve your website’s user experience with <strong>Scroll to Top</strong>, a lightweight and feature-rich plugin that adds a smooth “Back to Top” button and a <strong>Reading Progress Bar</strong>.</p>
<p>Long pages can be frustrating. This plugin helps users navigate seamlessly with a single click. Unlike basic scroll plugins, we offer <strong>16 professionally designed styles</strong>, ranging from minimal arrows to gamified animations like Rocket Launch and Cosmic effects.</p>
<p>It also includes a visual <strong>Reading Progress Bar</strong>, perfect for blogs and long-form content to show readers their position on the page. Position the bar at the <strong>top</strong>, <strong>bottom</strong>, or <strong>right side</strong> of the screen — and if you choose the top position, the plugin automatically detects your site’s header (including sticky and FSE block theme headers) and places the bar neatly below it.</p>
<h3>🚀 Why Choose This Scroll to Top Plugin?</h3>
<p>Every website needs smooth navigation. Our plugin boosts user experience by allowing visitors to return to the top of your page instantly, reducing bounce rates and keeping them engaged. We prioritized performance, ensuring the plugin is lightweight and fast, loading assets only when necessary so your site speed remains unaffected. You can fully customize the extensive color options to match your brand identity, complete with live previews. Plus, it’s designed to be mobile-responsive, working perfectly on phones, tablets, and desktops.</p>
<ul>
<li><strong>Boost Navigation:</strong> Reduce bounce rates by making it easy to scroll back up.</li>
<li><strong>Lightweight & Fast:</strong> Optimized for performance; assets load only when needed.</li>
<li><strong>Fully Customizable:</strong> Match your brand with unlimited colors and live previews.</li>
<li><strong>Mobile Responsive:</strong> Designed to work perfectly on phones, tablets, and desktops.</li>
</ul>
<h3>✨ Key Features</h3>
<p>Unlock a suite of powerful features designed for modern websites. Choose from over 16 unique styles, ranging from minimalist designs to fun animations. The integrated Reading Progress Bar gives users a clear visual indicator of their position, while the smooth scroll technology ensures a polished feel. You have full control over positioning, scroll triggers, animation speed, and page targeting to ensure the button appears exactly when and where you need it.</p>
<ul>
<li><strong>16+ Unique Styles:</strong> Choose from minimalist arrows, rockets, bubbles, neon effects, and more.</li>
<li><strong>Reading Progress Bar:</strong> A sleek bar that fills as users scroll — position it at the top, bottom, or right side.</li>
<li><strong>Header Auto-Detection:</strong> When placed at the top, the bar automatically detects sticky and FSE block theme headers and sits neatly below them. You can also provide a custom CSS selector.</li>
<li><strong>Smooth Scroll Up:</strong> Customize the scroll speed (Slow, Normal, Fast) for a polished feel.</li>
<li><strong>Smart Positioning:</strong> Place the button Bottom-Right, Bottom-Left, or Bottom-Center.</li>
<li><strong>Scroll Trigger:</strong> Auto-show the button after scrolling a specific distance (e.g., 300px).</li>
<li><strong>Page Targeting:</strong> Display on specific post types (Homepage, Posts, Pages) or exclude as needed.</li>
<li><strong>Accessibility Ready:</strong> WCAG compliant with keyboard support and ARIA labels.</li>
</ul>
<h3>🎨 Styles Included</h3>
<p>We understand that every site has a unique design language. That’s why we’ve included a diverse library of button styles. Whether you need an essential arrow for a professional business site, a visual indicator for a blog, or a fun animation for a creative portfolio, you’ll find the perfect match. Our styles include everything from neon pulses and holographic effects to classic, minimal designs.</p>
<ul>
<li><strong>Essential:</strong> Classic Arrow, Minimal Glass, Floating Bubble.</li>
<li><strong>Visual Indicators:</strong> Progress Circle, Progress Bar (Top / Bottom / Right).</li>
<li><strong>Fun Animations:</strong> Rocket Launch, Magic Wand, Floating Bubble.</li>
<li><strong>Modern Effects:</strong> Neon Pulse, Holographic, Cosmic Sparkle.</li>
</ul>
<h3>♿ Accessibility First</h3>
<p>Web accessibility is at the core of our development. We believe navigation should be seamless for everyone. The plugin is built with strict WCAG compliance, offering full keyboard navigation support (Tab key) and proper ARIA labels for screen readers. It also respects user preferences for reduced motion, ensuring a comfortable experience for all visitors.</p>
<ul>
<li><strong>Keyboard Support:</strong> Full keyboard navigation support (Tab key).</li>
<li><strong>Screen Readers:</strong> Proper ARIA labels for screen readers.</li>
<li><strong>Reduced Motion:</strong> Respects user “Reduced Motion” settings in browsers.</li>
</ul>
<p><strong>💡 Pro Tips:</strong><br />
* Use the progress circle style for long-form content<br />
* Match button colors to your brand palette<br />
* Enable the progress bar and set it to “Top” — it will auto-detect your sticky header and sit neatly below it<br />
* Use the custom selector option if your theme uses a non-standard header class (e.g. <code>.my-theme-header</code>)<br />
* Adjust bottom offset to avoid conflicts with other fixed elements<br />
* Position buttons based on your site’s layout</p>


Scroll to Top – Smooth Scroll Up, Back to Top & Reading Progress Bar

Add a customizable Scroll to Top button and Reading Progress Bar. Smooth scroll up, 16+ styles, and mobile responsiveness for better navigation.

Iftakharul Islam

<p>The Reading Progress Bar plugin adds a beautiful, customizable progress bar to your blog posts, allowing readers to see how much they have scrolled through the content. This feature helps to enhance the reading experience and provides a visual indication of the user’s progress.</p>
<p><strong>Key Features:</strong><br />
– 🎨 <strong>Modern Dashboard</strong>: Beautiful, intuitive admin interface with live preview<br />
– 🌈 <strong>Advanced Customization</strong>: Gradient colors, shadows, borders, and effects<br />
– 📱 <strong>Responsive Design</strong>: Works perfectly on desktop, tablet, and mobile<br />
– ⚡ <strong>Performance Optimized</strong>: Smooth animations and efficient code<br />
– 🎯 <strong>Per-Post Control</strong>: Enable/disable for individual posts<br />
– 📊 <strong>Reading Time</strong>: Display estimated reading time<br />
– 🎪 <strong>Live Preview</strong>: See changes in real-time as you adjust settings</p>
<h3>Features</h3>
<h3>Core Functionality</h3>
<ul>
<li><strong>Reading Progress Tracking</strong>: Real-time progress bar that shows how much of the post has been read</li>
<li><strong>Per-Post Control</strong>: Enable/disable progress bar for individual posts</li>
<li><strong>Reading Time Estimation</strong>: Display estimated reading time for posts</li>
<li><strong>Responsive Design</strong>: Works perfectly on desktop, tablet, and mobile devices</li>
</ul>
<h3>Advanced Customization</h3>
<ul>
<li><strong>Color Options</strong>:
<ul>
<li>Solid color picker with WordPress native color picker</li>
<li>Gradient color support with start and end colors</li>
<li>Custom shadow colors and effects</li>
<li>Border color and width customization</li>
</ul>
</li>
</ul>
<h3>Visual Effects</h3>
<ul>
<li><strong>Position Control</strong>: Place progress bar at top or bottom of screen</li>
<li><strong>Size Customization</strong>: Adjustable height (1-20px)</li>
<li><strong>Border Radius</strong>: Rounded corners (0-50px)</li>
<li><strong>Opacity Control</strong>: Adjust transparency (0.1-1.0)</li>
<li><strong>Shadow Effects</strong>: Customizable shadow with color and blur options</li>
<li><strong>Border Styling</strong>: Optional border with custom color and width</li>
</ul>
<h3>User Experience</h3>
<ul>
<li><strong>Smooth Animations</strong>: Fluid progress updates with CSS transitions</li>
<li><strong>Performance Optimized</strong>: Uses requestAnimationFrame for smooth scrolling</li>
<li><strong>Keyboard Navigation</strong>: Space bar and arrow key support</li>
<li><strong>Touch Gestures</strong>: Swipe support for mobile devices</li>
<li><strong>Accessibility</strong>: High contrast mode and reduced motion support</li>
</ul>
<h3>Dashboard Features</h3>
<ul>
<li><strong>Modern Admin Interface</strong>: Beautiful, responsive dashboard with tabs</li>
<li><strong>Live Preview</strong>: See changes in real-time as you adjust settings</li>
<li><strong>Statistics</strong>: View posts with progress bar enabled vs total posts</li>
<li><strong>Organized Settings</strong>: Grouped options for easy configuration</li>
</ul>
<h3>Configuration</h3>
<h3>Basic Settings</h3>
<ol>
<li>Navigate to <strong>Settings > Reading Progress Bar</strong></li>
<li>Configure appearance options:
<ul>
<li><strong>Color</strong>: Choose solid color or enable gradient</li>
<li><strong>Height</strong>: Set progress bar height (1-20px)</li>
<li><strong>Position</strong>: Top or bottom of screen</li>
<li><strong>Border Radius</strong>: Add rounded corners</li>
<li><strong>Opacity</strong>: Adjust transparency</li>
</ul>
</li>
</ol>
<h3>Advanced Effects</h3>
<ul>
<li><strong>Shadow</strong>: Enable shadow with custom color and blur</li>
<li><strong>Border</strong>: Add border with custom color and width</li>
<li><strong>Gradient</strong>: Use gradient colors instead of solid color</li>
</ul>
<h3>Display Settings</h3>
<ul>
<li><strong>Show on Posts</strong>: Enable/disable for blog posts</li>
<li><strong>Show on Pages</strong>: Enable/disable for pages</li>
<li><strong>Show Reading Time</strong>: Display estimated reading time</li>
</ul>
<h3>Per-Post Settings</h3>
<ul>
<li>Edit any post and look for the “Reading Progress Bar” meta box</li>
<li>Check/uncheck to enable/disable for that specific post</li>
</ul>
<h3>Requirements</h3>
<ul>
<li>WordPress 5.6 or higher</li>
<li>PHP 7.3 or higher</li>
<li>jQuery (included with WordPress)</li>
</ul>
<h3>License</h3>
<p>This plugin is released under the GPL-2.0+ license. You can find a copy of the license in the <code>license.txt</code> file or visit <a href="http://www.gnu.org/licenses/gpl-2.0.txt" rel="nofollow ugc">http://www.gnu.org/licenses/gpl-2.0.txt</a> for more information.</p>
<h3>Support</h3>
<p>For support, feature requests, or bug reports, please visit the <a href="https://ifatwp.wordpress.com/2023/10/17/blog-reading-progress/" rel="nofollow ugc">plugin page</a> or create an issue on GitHub.</p>
<p><strong>Made with ❤️ for the WordPress community</strong></p>


Reading Progress Bar

A modern WordPress plugin that adds a customizable reading progress bar to your blog posts with advanced styling options.

Scroll to Top – Smooth Scroll Up, Back to Top & Reading Progress Bar vs Reading Progress Bar