Overview
KineticHub Scroll to Top adds a configurable Back to Top control to WordPress with smart scrolling, reading progress, responsive positioning, Smart Return, and built-in compatibility tools.
It is designed to stay simple for a normal setup while still giving you more control when your theme, layout, or scrolling environment needs it.
Use it for:
- Long blog posts and editorial content
- Landing pages and service pages
- Documentation and knowledge bases
- WooCommerce and business websites
- Sites where the theme’s default Back to Top button is too limited
- Custom layouts that scroll inside a container instead of the browser window
You can start with the defaults, then adjust only the settings your site needs.
Install the plugin
- Go to Plugins → Add New
- Search for KineticHub Scroll to Top
- Install and activate the plugin
- Open Settings → KineticHub Scroll to Top
- Make sure the plugin is enabled
- Save your settings
- Open a long page on the frontend and scroll down to test the control
For most sites, the default Smart scroll motion and Auto scroll source are the best place to start.
Recommended starting settings
If you are not sure what to change, start with:
- Scroll Motion: Smart
- Destination: Page Top
- Smart Return: On
- Position: Bottom Right
- Smart Idle Fade: On
- Scroll Source: Auto
- Smart Conflict Detection: On
- Reading Progress: Optional
- Rocket Boost: Off until the basic setup is working
Once the control behaves correctly, customize its appearance and optional effects.
General
The General tab controls the main scroll behavior, reveal logic, destination, Smart Return, and scroll environment.
Enable Scroll to Top
Turns the frontend control on or off.
Your settings are kept when the plugin is disabled, so you can temporarily hide the control without losing your configuration.
Scroll Motion
Choose how the page moves when the visitor activates the control.
Smart
Recommended for most websites.
Smart Motion adjusts the scrolling experience so long jumps feel controlled without making visitors wait through an unnecessarily slow animation.
It is a good default for:
- Long pages
- Blog posts
- Landing pages
- Documentation
- General business sites
Smooth
Uses a traditional smooth scrolling transition.
Choose Smooth when you prefer the standard browser-style animated movement.
Instant
Moves directly to the destination without an animated transition.
Instant is useful when:
- You want immediate navigation
- Motion is not important to the design
- You are testing a compatibility issue
Visitors who prefer reduced motion are given an appropriate reduced-motion experience automatically.
Reveal behavior
The control does not need to remain visible from the first pixel of the page.
Reveal settings determine when the button becomes useful enough to show.
Reveal threshold
Controls how far the visitor needs to scroll before the control appears.
Use a larger value when you want the interface to stay cleaner near the top of the page.
Smart Reveal
Smart Reveal lets the control react more naturally to the visitor’s scrolling rather than behaving like a permanently fixed button.
This works especially well on long content where the control is useful only after the visitor has moved away from the top.
Peek behavior
When enabled, the control can remain less visually prominent until it becomes relevant again.
This helps reduce competition with the page content.
Scroll destination
Choose where the visitor is taken when the primary action is activated.
Page Top
Returns to the beginning of the page.
This is the recommended option for most websites.
Content Start
Returns to the beginning of the main content area instead of the absolute top of the document.
Content Start is useful when the page includes:
- A large site header
- A promotional banner
- A large hero section
- Content above the main article
Custom destination
For more specialized layouts, you can target a specific destination using a CSS selector.
Use this only when you know which element should be treated as the beginning of the useful content.
Smart Return
Smart Return helps visitors return to the place they were reading before a meaningful jump to the top.
Example:
- A visitor is deep inside a long article
- They activate Scroll to Top
- The page moves to the selected top destination
- The same control temporarily becomes Return to previous position
- Activating it again returns the visitor to where they were reading
No second floating button is added.
When Smart Return appears
Smart Return is intended for meaningful upward jumps.
If the visitor is only a short distance from the destination, there may be no useful previous position to return to.
The return state is also temporary. It can clear when the visitor:
- Continues scrolling manually
- Starts navigating elsewhere
- Waits until the return offer expires
This prevents an old reading position from remaining available after it is no longer relevant.
Recommended setting
Keep Smart Return enabled on long pages unless returning to the previous position would be confusing for your layout.
Rocket Boost is used only for the primary upward action. It does not run for Smart Return.
Scroll source and compatibility
Most WordPress sites scroll through the normal browser window.
Leave Scroll Source on Auto unless you have a specific reason to change it.
Auto
Recommended for most websites.
The plugin determines the appropriate scroll environment automatically.
Window
Forces the normal browser window to be used as the scroll source.
Use this when your site uses standard page scrolling.
Custom
Use Custom when the page scrolls inside a specific element instead of the browser window.
Enter the CSS selector for the element that actually handles scrolling.
Custom mode is intended for advanced layouts such as:
- Full-screen application interfaces
- Fixed-shell layouts
- Scrollable panels
- Custom page-builder containers
If you are not sure whether your site uses a custom scroll container, leave the setting on Auto.
Smart Conflict Detection
Many WordPress themes already include their own Back to Top control.
Smart Conflict Detection checks for likely existing controls so you do not accidentally show two buttons in the same area.
If a conflict is detected, review the compatibility status before changing anything.
Best practice
If your theme has its own setting to disable its Back to Top button, use that setting first.
This is usually the cleanest solution.
Force Replace
Force Replace is useful when a theme’s Back to Top control cannot be disabled normally.
When enabled, KineticHub hides the competing control so only one Back to Top interface remains visible.
Use Force Replace when:
- Both controls are visible
- You have confirmed which theme control is being detected
- The theme does not provide its own off switch
Force Replace hides the competing control. It does not uninstall or rewrite the theme’s functionality.
Position
The Position tab controls where the button appears and how far it sits from the viewport edges.
Position
Available placement options include:
- Bottom Right
- Bottom Left
- Bottom Center
Bottom Right is a good starting point for most websites.
Before choosing a position, check whether the same area already contains:
- A chat widget
- Cookie controls
- A floating cart
- Accessibility tools
- A mobile toolbar
- Another fixed button
If controls overlap, change the position or increase the offsets.
Horizontal and vertical offsets
Offsets control the spacing between the button and the viewport edges.
Increase them when the button is too close to another interface element or sticky component.
Responsive positioning
You can adjust placement for different device sizes.
This is useful when your desktop position conflicts with:
- Mobile navigation
- Sticky mobile bars
- Chat buttons
- Cookie notices
- Other touch controls
Always test responsive positioning on a real phone after making significant changes.
Smart Footer Dock
Smart Footer Dock helps the control behave more naturally near the bottom of the page.
It is useful when a large footer or final page section would otherwise make the fixed control feel awkward or overlap important content.
Appearance
The Appearance tab controls the visual style and interaction polish.
Quick Style
Choose a starting style, then fine-tune individual options.
This is faster than building the appearance from scratch.
Icon
Choose the icon used inside the control.
Keep the icon easy to recognize. A creative design is useful only if visitors still understand that the control navigates upward.
Shape
Choose a shape that fits your interface.
Available styles include circular, rounded, and square variations.
Size
Adjust the overall control size.
On mobile, prioritize comfortable tapping rather than making the button too small.
Colors
Customize the control to match your site, including the button, icon, progress, border, and interaction states.
Keep enough contrast between the control and the background behind it.
Border and shadow
Use border and shadow settings to separate the control from the page without making it visually heavy.
Subtle values usually work best on content-heavy pages.
Smart Idle Fade
Smart Idle Fade reduces the visual prominence of the control while the visitor is inactive.
When interaction becomes relevant again, the control returns to full prominence.
Use Smart Idle Fade when you want:
- The control to remain available
- Less visual competition with the page content
- A cleaner reading experience
It automatically gives way to more important interaction states such as focus, hover, Smart Return, and Rocket Boost.
Hover / Focus Label
The optional Hover / Focus Label provides a short text description of the current action.
Depending on the selected destination and current state, it can display:
- Back to top
- Back to content start
- Return to previous position
The label is useful when the icon alone may not clearly explain the action.
It also helps keyboard users by providing a visible indication when the control receives focus.
Interaction polish
Small interaction details are included to make the control feel responsive without adding another settings panel.
For example, the normal control uses a subtle press response when activated.
When Rocket Boost is enabled, Rocket Boost replaces the standard press effect for the primary upward action.
These effects do not change the destination or delay the core navigation.
KineticPowers
KineticPowers are optional visual enhancements for users who want a little more personality.
They are not required for the plugin to work.
Rocket Boost
Rocket Boost adds a lightweight launch-and-arrival animation to the primary upward action.
The actual scroll begins immediately.
Rocket Boost does not intentionally delay the visitor while the effect plays.
Intensity
Choose from:
- Subtle — restrained movement
- Balanced — recommended for most designs
- Strong — a more noticeable effect
Start with Balanced and adjust only if the effect feels too quiet or too strong for your site.
When to use Rocket Boost
Rocket Boost works well for:
- Modern product sites
- Creative portfolios
- Landing pages
- Branded interfaces
- Sites where playful micro-interactions fit the visual style
Leave it off for very minimal or formal interfaces if the additional motion does not add value.
Visitors who prefer reduced motion do not receive the Rocket Boost animation.
Progress
The Progress tab controls the optional reading-progress display around the button.
Enable Progress
Turn this on to show a progress ring around the Scroll to Top control.
You can use:
- Progress ring only
- Progress ring with percentage
Whole Page
Measures progress through the entire document.
Use Whole Page for:
- Landing pages
- Service pages
- General business pages
- Pages where the full layout is part of the experience
Smart Content
Measures progress through the main content area rather than the entire document.
Smart Content is especially useful for:
- Blog posts
- Documentation
- Articles
- Editorial layouts
This avoids treating a large header or footer as part of the reading progress when it is not relevant.
Custom content selector
If the automatic content area is not correct for your layout, you can target a specific content element with a CSS selector.
Use this only when you know which element represents the content you want to measure.
Percentage
Enable Percentage when you want to show the exact progress value inside the control.
Leave it off when the ring alone provides enough information.
Progress colors
Customize:
- Active progress color
- Track color
- Track opacity
Keep enough contrast for the ring to remain visible against the button background.
Ring thickness
Controls the visual weight of the progress ring.
A thinner ring feels more subtle. A thicker ring makes progress easier to notice.
Mobile override
Use the mobile override if the desktop progress presentation feels too large or visually busy on smaller screens.
Visibility
The Visibility tab controls where the Scroll to Top control is allowed to appear.
Use it when the same configuration should not apply everywhere.
Device visibility
You can control whether the button is shown on different device sizes.
For example:
- Desktop only
- Mobile only
- Both desktop and mobile
Most sites should keep both enabled unless another mobile interface already provides the same function.
Page and content scope
Use scope controls when the button should appear only on certain parts of the site.
This can be useful when:
- Only long articles need the control
- A landing page uses a custom navigation system
- A particular layout already includes its own navigation controls
The plugin also avoids showing a useful Scroll to Top control when the page does not have enough scrollable distance.
Accessibility and reduced motion
KineticHub Scroll to Top is designed to work beyond mouse interaction.
The control supports:
- Keyboard activation
- Visible keyboard focus
- Accessible action labels
- Touch interaction
- Comfortable control sizing
- Reduced-motion preferences
When the visitor prefers reduced motion, motion-sensitive behavior is reduced or removed and navigation uses an appropriate instant path.
Do not rely on Rocket Boost or another visual effect to communicate information the visitor must understand. These effects are decorative.
Performance
KineticHub Scroll to Top is designed to remain lightweight.
It does not require:
- jQuery
- A JavaScript framework
- Remote fonts
- External icon libraries
- Visitor analytics
- Telemetry
The core features share the same frontend runtime instead of loading separate systems for every option.
Optional KineticPower styling is loaded only when needed.
Caching and optimization plugins
The plugin works with normal WordPress caching.
After changing settings, clear your site cache if the frontend still shows the old configuration.
Depending on your setup, this can include:
- WordPress page cache
- Hosting cache
- CDN cache
- Generated or combined CSS
- Generated or combined JavaScript
- Browser cache
If an optimization plugin aggressively delays or rewrites JavaScript and the control behaves unexpectedly, temporarily disable that optimization and test again.
This helps determine whether the issue comes from KineticHub or from the optimization layer.
Recommended setups
General business website
Start with:
- Scroll Motion: Smart
- Destination: Page Top
- Smart Return: On
- Position: Bottom Right
- Smart Idle Fade: On
- Progress: Off or subtle
- Rocket Boost: Off
- Scroll Source: Auto
- Smart Conflict Detection: On
This gives you a clean and useful Back to Top control without making it visually dominant.
Long blog posts
Use:
- Scroll Motion: Smart
- Smart Return: On
- Progress: On
- Progress Source: Smart Content
- Percentage: Optional
- Smart Idle Fade: On
Smart Return is particularly useful here because readers can go to the top without permanently losing their position.
Modern landing page
Use:
- Scroll Motion: Smart
- Smart Return: On
- Progress: Whole Page
- Custom colors
- Rocket Boost: Balanced if it fits the site’s visual style
Check the footer and final call-to-action area to make sure the fixed control does not overlap important content.
Minimal website
Use:
- Scroll Motion: Smart
- Smart Return: On
- Progress: Off
- Rocket Boost: Off
- Smart Idle Fade: On
- Simple icon and shape
This keeps the control available without drawing unnecessary attention.
Theme already has a Back to Top button
- Enable Smart Conflict Detection
- Review the detected control
- Check whether your theme has its own Back to Top setting
- Disable the theme control there if possible
- If no clean theme option exists, use Force Replace
- Clear caches
- Test while logged out
Custom scroll container
- Confirm which element actually scrolls
- Set Scroll Source to Custom
- Enter the CSS selector
- Save
- Scroll inside the container
- Confirm the KineticHub control follows that scroll position
- Test the button, progress, and Smart Return
If you are not sure whether your site uses a custom scroll container, use Auto instead.
Troubleshooting
The button does not appear
Check:
- The plugin is enabled
- The page is long enough to scroll
- You have scrolled far enough to meet the reveal condition
- Device visibility allows the current device
- The current page is allowed by the Visibility settings
- Your cache has been cleared
- Another plugin is not hiding or modifying the control
Test in a private/incognito window if necessary.
The button appears, but clicking it does not scroll correctly
Check:
- Scroll Motion
- Scroll Source
- Custom scroll container selector
- Custom destination selector
- Browser console errors
- JavaScript optimization or delay settings
If Custom scroll source is enabled, confirm that the selector points to the element that actually scrolls.
Smart Return does not appear
Check:
- Smart Return is enabled
- You started far enough down the page
- You completed a meaningful upward jump
- You did not immediately continue scrolling manually
- The temporary return state has not expired
For testing, start from much farther down the page and try again.
Smart Return disappears after reaching the top
Smart Return is intentionally cleared when the visitor begins a new manual navigation action.
If it disappears immediately without any visitor interaction, temporarily test with caching and JavaScript optimization disabled.
Progress looks incorrect
Check whether Progress Source is set to:
- Whole Page
- Smart Content
For blog posts and documentation, Smart Content is often more useful.
For unusual layouts, use a custom content selector.
The theme’s Back to Top control is still visible
- Run Smart Conflict Detection
- Disable the theme control through its own settings if possible
- If it cannot be disabled normally, enable Force Replace
- Clear caches
- Test while logged out
Rocket Boost does not run
Check:
- KineticPowers is enabled
- Rocket Boost is selected
- The action is the primary upward action
- Reduced motion is not active
Rocket Boost does not run for Smart Return.
The control overlaps another floating button
Adjust:
- Position
- Horizontal offset
- Vertical offset
- Responsive position
Check the site on both desktop and mobile.
Changes do not appear on the frontend
Clear:
- WordPress cache
- Hosting cache
- CDN cache
- Generated CSS
- Generated JavaScript
- Browser cache
Then test again in a private browser window.
Frequently asked questions
Which Scroll Motion should I use?
Use Smart for most websites.
Choose Smooth only when you specifically prefer traditional smooth scrolling, or Instant when you want immediate navigation.
Should I enable Smart Return?
For long pages, usually yes.
It gives visitors a practical way to return to their previous reading position after using Scroll to Top.
Should I enable Reading Progress?
Use it when visitors benefit from knowing how far they are through a page.
It is especially useful for articles, documentation, and long landing pages.
Should I use Whole Page or Smart Content progress?
Use Whole Page when the entire layout is part of the experience.
Use Smart Content when you want progress to represent the main article or content area.
Should I enable Rocket Boost?
Only if it fits your site’s visual personality.
Rocket Boost is optional and does not improve the core navigation itself.
What if my theme already has a Back to Top button?
Disable the theme’s control through the theme settings when possible.
If that is not available, use Smart Conflict Detection and Force Replace.
Does the plugin work on mobile?
Yes.
Position, offsets, sizing, visibility, and progress behavior can be adjusted for smaller screens.
Does the plugin support custom scroll containers?
Yes.
Use the Custom Scroll Source option and enter the selector for the element that actually scrolls.
Does KineticHub Scroll to Top track visitors?
No.
The plugin does not include visitor analytics or telemetry.
Next step
Install KineticHub Scroll to Top, start with the recommended settings, and test it on one of your longest pages.
Once the core behavior feels right, enable Reading Progress, customize the appearance, or try Rocket Boost for additional visual polish.
Support box text
Need help with KineticHub Scroll to Top?
Use the WordPress.org support forum for the free plugin. When reporting a problem, include your active theme, Scroll Motion, Scroll Source, device/browser, and whether caching or JavaScript optimization is enabled.