Title: Top-Down Scroll – Customizable Scroll to Top Button Author: Nitya Saha Published: جون 30, 2024 Last modified: اکتوبر 10, 2026 --- Search plugins ![](https://ps.w.org/top-down-scroll/assets/banner-772x250.png?rev=3261047) ![](https://ps.w.org/top-down-scroll/assets/icon-256x256.png?rev=3261047) # Top-Down Scroll – Customizable Scroll to Top Button By [Nitya Saha](https://profiles.wordpress.org/nityasaha/) [Download](https://downloads.wordpress.org/plugin/top-down-scroll.1.3.7.zip) * [Details](https://ps.wordpress.org/plugins/top-down-scroll/#description) * [Reviews](https://ps.wordpress.org/plugins/top-down-scroll/#reviews) * [Installation](https://ps.wordpress.org/plugins/top-down-scroll/#installation) * [Development](https://ps.wordpress.org/plugins/top-down-scroll/#developers) [Support](https://wordpress.org/support/plugin/top-down-scroll/) ## Description Top-Down Scroll adds a **scroll to top button** to your WordPress site, plus an optional **scroll to bottom button**, so visitors can jump to either end of a long page in a single click. Long posts, documentation pages, product listings and endless-scroll archives all leave readers stranded at the bottom of the page. A back to top button fixes that, and this plugin adds one without you touching a single line of code. Everything is configured on one screen under **Appearance Top-Down Scroll**. There is no shortcode to place and no template file to edit: switch a button on and it appears across your whole site. #### Why use Top-Down Scroll? * **Two buttons, controlled separately** — turn on the scroll to top button, the scroll to bottom button, or both. * **Shows only when it is useful** — the top button appears once a visitor has scrolled past 10% of the page, and the bottom button hides as they approach the end, so neither button sits on top of your content when it is not needed. * **Smooth scrolling** — clicking a button glides the page to the top or bottom instead of jumping there. * **Use your own icon** — pick any image or SVG from your media library, or keep the built-in arrows. * **Match your brand colors** — choose a background color and a separate hover color with the built-in color picker. * **Left or right** — place the buttons on whichever side suits your layout. * **Adjustable icon size** — set the size in pixels to suit your design. * **Shape the button** — set the corner radius, inner padding, and an optional border with its own width and color. * **Control the spacing** — choose how far the buttons sit from the bottom of the screen and from the side of the page. * **Works with any theme** — the buttons are output through `wp_footer`, so block themes, classic themes and page builders are all supported. * **Translation ready** — every piece of interface text can be translated. #### How it works Once activated, the plugin renders a fixed-position button in the corner of your site. As the visitor scrolls, the button appears; clicking it smooth-scrolls the page back to the top. If you also enable the scroll to bottom button, a second button sits beside it and jumps the visitor to the end of the page. You stay in control of how the buttons look. Upload a custom arrow, a chevron, a logo mark or any icon you like, set its size, and give it a background and hover color that fits your design. ## Screenshots [⌊The scroll to top and scroll to bottom buttons on the front end of a site.⌉⌊The scroll to top and scroll to bottom buttons on the front end of a site.⌉[ The scroll to top and scroll to bottom buttons on the front end of a site. [⌊The plugin settings screen under Appearance → Top-Down Scroll.⌉⌊The plugin settings screen under Appearance → Top-Down Scroll.⌉[ The plugin settings screen under Appearance Top-Down Scroll. ## Installation #### From your WordPress dashboard 1. Go to **Plugins Add New**. 2. Search for **Top-Down Scroll**. 3. Click **Install Now**, then **Activate**. 4. Go to **Appearance Top-Down Scroll** to configure your buttons. #### Manual installation 1. Upload the `top-down-scroll` folder to the `/wp-content/plugins/` directory, or upload the zipped folder via **Plugins Add New Upload Plugin**. 2. Activate the plugin through the **Plugins** menu in WordPress. 3. Go to **Appearance Top-Down Scroll** to configure your buttons. ## FAQ ### How do I add a scroll to top button in WordPress? Install and activate Top-Down Scroll, then go to **Appearance Top-Down Scroll** and switch on **Scroll to top**. The button is added to every page of your site straight away, with no shortcode or theme editing required. ### Where do I find the plugin settings? Under **Appearance Top-Down Scroll** in your WordPress dashboard. There is also a **Settings** link next to Top-Down Scroll on the Plugins screen. ### Can I show only the scroll to top button? Yes. The scroll to top and scroll to bottom buttons are independent, so you can enable either one on its own or use both together. ### Can I use my own icon or image? Yes. Click **Select icon** next to either button and choose any image from your media library. SVG and PNG both work. Leave it empty to use the built-in arrow. ### Can I change the button color? Yes. The settings screen has a color picker for the button background and a second one for the hover color, so the button can change color when a visitor points at it. ### Can I move the button to the left or the right? Yes. The **Position** setting places both buttons on either the left or the right side of the screen. ### How do I change the size of the button icon? Set a value in the **Icon size** field. The default is 20px, and 18–25px works best when both buttons are enabled at once. ### Can I round the corners or add a border? Yes. **Border Radius** rounds the corners of both buttons, and **Border Width** adds a border once it is set above 0. The border color is picked in the **Colors** section, next to the background and hover colors. ### Can I change how far the buttons sit from the edge of the screen? Yes. **Bottom Spacing** controls the gap from the bottom of the screen and **Side Wall Spacing** the gap from the left or right edge. When both buttons are enabled the top button is positioned automatically so it always clears the bottom one, whatever padding, icon size and border you have chosen. ### When does the scroll to top button appear? The top button appears once the visitor has scrolled past roughly 10% of the page, so it stays out of the way at the very top. The bottom button hides once they are within the last 10% of the page. ### Does it work with my theme? Yes, as long as your theme calls `wp_footer()`, which every properly built theme does. Block themes, classic themes and page builder layouts are all supported. ### Does the button work on mobile? Yes. The buttons use fixed positioning and stay in the corner of the screen on phones and tablets just as they do on desktop. ### Does clicking the button scroll smoothly? Yes. Both buttons use native smooth scrolling, so the page glides to the top or bottom rather than jumping instantly. ## Reviews ![](https://secure.gravatar.com/avatar/8dfe44315c68927cd6a75d0fc603111cf185032a64ac0264e1faf0fdba329759? s=60&d=retro&r=g) ### 󠀁[Nice plugin, code is lightweight and does the job](https://wordpress.org/support/topic/nice-plugin-code-is-lightweight-and-does-the-job/)󠁿 [iitbritesh](https://profiles.wordpress.org/iitbritesh/) جولای 1, 2024 Nice plugin, code is lightweight and does the job – Great feature to add to websites [ Read all 1 review ](https://wordpress.org/support/plugin/top-down-scroll/reviews/) ## Contributors & Developers “Top-Down Scroll – Customizable Scroll to Top Button” is open source software. The following people have contributed to this plugin. Contributors * [ Nitya Saha ](https://profiles.wordpress.org/nityasaha/) [Translate “Top-Down Scroll – Customizable Scroll to Top Button” into your language.](https://translate.wordpress.org/projects/wp-plugins/top-down-scroll) ### Interested in development? [Browse the code](https://plugins.trac.wordpress.org/browser/top-down-scroll/), check out the [SVN repository](https://plugins.svn.wordpress.org/top-down-scroll/), or subscribe to the [development log](https://plugins.trac.wordpress.org/log/top-down-scroll/) by [RSS](https://plugins.trac.wordpress.org/log/top-down-scroll/?limit=100&mode=stop_on_copy&format=rss). ## Changelog #### 1.3.7 * New settings for button padding, border radius, bottom spacing and side wall spacing * New settings for button border width and border color * Border radius, padding and the border now apply to the scroll to bottom button as well, not only the scroll to top button * Fixed the top button overlapping the bottom button when a custom padding, icon size or bottom spacing was used * The media library is no longer loaded on the front end, or on admin screens that do not need it * SVG uploads are now left alone when another plugin already allows them, and are limited to administrators * Fixed SVG uploads being rejected on hosts where the server reports the file as plain text #### 1.3.6 * Redesigned the settings screen: card-based layout, toggle switches, a segmented position control and clearer icon previews * Added a “Settings saved” confirmation notice * Added input sanitization for the icon size setting #### 1.3.5 * Compatabillity #### 1.3.4 * Compatabillity #### 1.3.2 * Compatabillity #### 1.3.1 * Security and optimization #### 1.3 * Bug-free #### 1.2 * All required features added #### 1.1 * First release ## Meta * Version **1.3.7** * Last updated **21 ساعتونه ago** * Active installations **60+** * WordPress version ** 6.0 or higher ** * Tested up to **7.1.3** * PHP version ** 7.4 or higher ** * Language * [English (US)](https://wordpress.org/plugins/top-down-scroll/) * Tags * [back to top](https://ps.wordpress.org/plugins/tags/back-to-top/)[go-to-top](https://ps.wordpress.org/plugins/tags/go-to-top/) [scroll to top](https://ps.wordpress.org/plugins/tags/scroll-to-top/)[scroll to top button](https://ps.wordpress.org/plugins/tags/scroll-to-top-button/) [smooth scroll](https://ps.wordpress.org/plugins/tags/smooth-scroll/) * [Advanced View](https://ps.wordpress.org/plugins/top-down-scroll/advanced/) ## Ratings 5 out of 5 stars. * [ 1 5-star review ](https://wordpress.org/support/plugin/top-down-scroll/reviews/?filter=5) * [ 0 4-star reviews ](https://wordpress.org/support/plugin/top-down-scroll/reviews/?filter=4) * [ 0 3-star reviews ](https://wordpress.org/support/plugin/top-down-scroll/reviews/?filter=3) * [ 0 2-star reviews ](https://wordpress.org/support/plugin/top-down-scroll/reviews/?filter=2) * [ 0 1-star reviews ](https://wordpress.org/support/plugin/top-down-scroll/reviews/?filter=1) [Your review](https://wordpress.org/support/plugin/top-down-scroll/reviews/#new-post) [See all reviews](https://wordpress.org/support/plugin/top-down-scroll/reviews/) ## Contributors * [ Nitya Saha ](https://profiles.wordpress.org/nityasaha/) ## Support Got something to say? Need help? [View support forum](https://wordpress.org/support/plugin/top-down-scroll/) ## Donate Would you like to support the advancement of this plugin? [ Donate to this plugin ](https://buymeacoffee.com/nityasaha)