Title: Scroll to Top – Smooth Scroll Up, Back to Top & Reading Progress Bar Author: Jose Varghese Published: 2025 年 10 月 10 日 Last modified: 2026 年 5 月 22 日 --- 搜索插件 ![](https://ps.w.org/creative-scroll-to-top-button/assets/banner-772x250.png?rev =3376770) ![](https://ps.w.org/creative-scroll-to-top-button/assets/icon-256x256.png?rev=3376772) # Scroll to Top – Smooth Scroll Up, Back to Top & Reading Progress Bar 作者：[Jose Varghese](https://profiles.wordpress.org/josevarghese/) [下载](https://downloads.wordpress.org/plugin/creative-scroll-to-top-button.1.2.1.zip) * [详情](https://cn.wordpress.org/plugins/creative-scroll-to-top-button/#description) * [评价](https://cn.wordpress.org/plugins/creative-scroll-to-top-button/#reviews) * [安装](https://cn.wordpress.org/plugins/creative-scroll-to-top-button/#installation) * [开发进展](https://cn.wordpress.org/plugins/creative-scroll-to-top-button/#developers) [支持](https://wordpress.org/support/plugin/creative-scroll-to-top-button/) ## 描述 Improve your website’s user experience with **Scroll to Top**, a lightweight and feature-rich plugin that adds a smooth “Back to Top” button and a **Reading Progress Bar**. Long pages can be frustrating. This plugin helps users navigate seamlessly with a single click. Unlike basic scroll plugins, we offer **16 professionally designed styles**, ranging from minimal arrows to gamified animations like Rocket Launch and Cosmic effects. It also includes a visual **Reading Progress Bar**, perfect for blogs and long-form content to show readers their position on the page. ### 🚀 Why Choose This Scroll to Top Plugin? 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. * **Boost Navigation:** Reduce bounce rates by making it easy to scroll back up. * **Lightweight & Fast:** Optimized for performance; assets load only when needed. * **Fully Customizable:** Match your brand with unlimited colors and live previews. * **Mobile Responsive:** Designed to work perfectly on phones, tablets, and desktops. ### ✨ Key Features 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. * **16+ Unique Styles:** Choose from minimalist arrows, rockets, bubbles, neon effects, and more. * **Reading Progress Bar:** A sleek vertical bar that fills as users read down the page. * **Smooth Scroll Up:** Customize the scroll speed (Slow, Normal, Fast) for a polished feel. * **Smart Positioning:** Place the button Bottom-Right, Bottom-Left, or Bottom- Center. * **Scroll Trigger:** Auto-show the button after scrolling a specific distance ( e.g., 300px). * **Page Targeting:** Display on specific post types (Homepage, Posts, Pages) or exclude as needed. * **Accessibility Ready:** WCAG compliant with keyboard support and ARIA labels. ### 🎨 Styles Included 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. * **Essential:** Classic Arrow, Minimal Glass, Floating Bubble. * **Visual Indicators:** Progress Circle, Side Progress Bar. * **Fun Animations:** Rocket Launch, Magic Wand, Floating Bubble. * **Modern Effects:** Neon Pulse, Holographic, Cosmic Sparkle. ### ♿ Accessibility First 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. * **Keyboard Support:** Full keyboard navigation support (Tab key). * **Screen Readers:** Proper ARIA labels for screen readers. * **Reduced Motion:** Respects user “Reduced Motion” settings in browsers. **💡 Pro Tips:** * Use the progress circle style for long-form content * Match button colors to your brand palette * Enable the side progress bar for visual feedback* Adjust bottom offset to avoid conflicts with other fixed elements * Position buttons based on your site’s layout ## 屏幕截图 * [[ * **WordPress Scroll to Top Settings Interface** – Configure styles, positions, and scroll triggers effortlessly. * [[ * **16 Customizable Button Styles** – Preview unique scroll to top designs and reading progress indicators. ## 安装 **Automatic Installation:** 1. Log in to your WordPress admin panel 2. Go to Plugins > Add New 3. Search for “Scroll to Top” 4. Click “Install Now” and then “Activate” 5. Go to Settings > Scroll to Top Button to configure **Manual Installation:** 1. Download the plugin zip file from the WordPress plugin page 2. Go to Plugins > Add New > Upload Plugin 3. Choose the downloaded file and click “Install Now” 4. Activate the plugin 5. Go to Settings > Scroll to Top Button to configure **Configuration:** 1. Navigate to Settings > Scroll to Top Button 2. Enable the plugin functionality 3. Select your preferred button style 4. Customize colors and position 5. Set bottom offset (distance from viewport bottom) 6. Choose which post types should display the button 7. Adjust scroll threshold and animation speed 8. Save your settings ## 常见问题 ### Does this plugin affect site performance? No, the plugin is lightweight and optimized for performance. It only loads necessary CSS and JavaScript files when the button is enabled and should be displayed. ### Can I customize the button colors? Yes! You can set custom colors for both the button’s normal state and hover state to match your website’s design. ### Can I control the button’s distance from the bottom? Yes! The new “Bottom Offset” setting allows you to specify the exact distance (20- 200px) from the bottom of the viewport where the button appears. ### Will the button work on mobile devices? Absolutely! The plugin is fully responsive and optimized for all devices, including smartphones and tablets. ### Can I choose where the button appears? Yes, you can select specific post types, pages, and even the homepage or blog page where you want the scroll-to-top button to be displayed. ### Is the plugin accessible? Yes, the plugin follows WordPress accessibility guidelines and includes proper ARIA labels, keyboard navigation support, and respects user preferences for reduced motion. ### Can I disable the side progress bar? Yes, the side progress bar is optional and can be enabled or disabled in the plugin settings. ### How do I change the scroll threshold? In the plugin settings, you can adjust the scroll threshold using a slider (100- 1000 pixels) to control when the button appears. ### Are there any animation options? Yes, you can control the scroll animation speed (slow, normal, fast) and some button styles include special animations like rocket launch and magic sparkles. ### Can I use this with any WordPress theme? Yes, the plugin is designed to work with any properly coded WordPress theme. If you experience any conflicts, please contact support. ### Is the plugin translation ready? Yes, the plugin is translation ready and includes proper text domains for easy translation into other languages. ## 评价 ![](https://secure.gravatar.com/avatar/94e13b5bf9584492a07f1d6ff43310c55a6b8e23384caf7d15e3896dfe24fa80? s=60&d=retro&r=g) ### 󠀁[Clean, fast, and does the job](https://wordpress.org/support/topic/clean-fast-and-does-the-job/)󠁿 [Sid](https://profiles.wordpress.org/isildur00/) 2025 年 10 月 21 日 Clean, easy to set up, and does exactly what it promises. A handy little plugin for better navigation. [ 阅读所有1条评价 ](https://wordpress.org/support/plugin/creative-scroll-to-top-button/reviews/) ## 贡献者及开发者 「Scroll to Top – Smooth Scroll Up, Back to Top & Reading Progress Bar」是开源软件。 以下人员对此插件做出了贡献。 贡献者 * [ Jose Varghese ](https://profiles.wordpress.org/josevarghese/) [帮助将「Scroll to Top – Smooth Scroll Up, Back to Top & Reading Progress Bar」翻译成简体中文。](https://translate.wordpress.org/projects/wp-plugins/creative-scroll-to-top-button) ### 对开发感兴趣吗? 您可以[浏览代码](https://plugins.trac.wordpress.org/browser/creative-scroll-to-top-button/)， 查看[SVN仓库](https://plugins.svn.wordpress.org/creative-scroll-to-top-button/)， 或通过[RSS](https://plugins.trac.wordpress.org/log/creative-scroll-to-top-button/?limit=100&mode=stop_on_copy&format=rss) 订阅[开发日志](https://plugins.trac.wordpress.org/log/creative-scroll-to-top-button/)。 ## 更新日志 #### 1.2.0 * Added icon selection option for button customization * Added “Back to Top” text display option * Added support for archive and tag pages * Added more layout and style settings * Cache clearing when settings are saved * Improved accessibility with ARIA label fixes * Bug fixes reported by Plugin Checker #### 1.1.0 * Bottom offset control (20-200px) #### 1.0.0 * Initial release * 16 creative button styles * Custom color options * Side progress bar * Position controls * Post type selection * Accessibility features * Responsive design * Performance optimization ## 额外信息 * 版本 **1.2.1** * 最后更新：**2 周前** * 活跃安装数量 **10+** * WordPress 版本 ** 5.0 或更高版本 ** * 已测试的最高版本为 **7.0** * PHP 版本 ** 7.4 或更高版本 ** * 语言 * [English (US)](https://wordpress.org/plugins/creative-scroll-to-top-button/) * 标签 * [back to top](https://cn.wordpress.org/plugins/tags/back-to-top/)[reading progress bar](https://cn.wordpress.org/plugins/tags/reading-progress-bar/) [scroll to top](https://cn.wordpress.org/plugins/tags/scroll-to-top/)[scroll up](https://cn.wordpress.org/plugins/tags/scroll-up/) [smooth scroll](https://cn.wordpress.org/plugins/tags/smooth-scroll/) * [高级视图](https://cn.wordpress.org/plugins/creative-scroll-to-top-button/advanced/) ## 评级 5 星（最高 5 星）。 * [ 1 条 5 星评价 ](https://wordpress.org/support/plugin/creative-scroll-to-top-button/reviews/?filter=5) * [ 0 条 4 星评价 ](https://wordpress.org/support/plugin/creative-scroll-to-top-button/reviews/?filter=4) * [ 0 条 3 星评价 ](https://wordpress.org/support/plugin/creative-scroll-to-top-button/reviews/?filter=3) * [ 0 条 2 星评价 ](https://wordpress.org/support/plugin/creative-scroll-to-top-button/reviews/?filter=2) * [ 0 条 1 星评价 ](https://wordpress.org/support/plugin/creative-scroll-to-top-button/reviews/?filter=1) [Your review](https://wordpress.org/support/plugin/creative-scroll-to-top-button/reviews/#new-post) [查看全部评论](https://wordpress.org/support/plugin/creative-scroll-to-top-button/reviews/) ## 贡献者 * [ Jose Varghese ](https://profiles.wordpress.org/josevarghese/) ## 支持 有话要说吗？是否需要帮助？ [查看支持论坛](https://wordpress.org/support/plugin/creative-scroll-to-top-button/) ## 捐助 您愿意支持这个插件的发展吗? [ 捐助此插件 ](https://superwebshare.com/zamy)