Scroll to Top Button

The Scroll to Top button helps visitors quickly return to the top of your page without manually scrolling. It appears as they scroll down and smoothly animates back to the top when clicked.

Scroll to top button configuration in the Customizer

What You Can Do

With BuddyX Pro’s scroll to top feature, you can:

Add a floating button for easy navigation
Help visitors return to the header menu
Improve user experience on long pages
Enable or disable the button site-wide
Automatic appearance based on scroll position
Smooth animated scrolling effect

What Is a Scroll to Top Button?

When visitors scroll down long pages (blog posts, product listings, member directories), they may want to quickly return to the top to access navigation or header elements. The Scroll to Top button provides a one-click shortcut.

How It Works:

Page Top
┌────────────────────────────┐
│  [Header/Menu]             │
├────────────────────────────┤
│                            │
│  Content                   │
│                            │  User scrolls down ↓
│                            │
│  More content...           │
│                            │
│  Even more...              │
│                            │
│  [↑] ← Button appears      │
└────────────────────────────┘

Click button → Smooth scroll back to top

Enabling Scroll to Top Button

Go to Appearance > Customize
Click on General > Scroll Top
Switch Scroll Top to Yes
Click Publish

Now scroll down any page and watch for the button to appear.

Button Behavior

When It Appears

Scroll Distance	Button State
0 – 300px	Hidden (not needed yet)
300px+	Fades in smoothly

The button only shows after you’ve scrolled 300 pixels down the page. This prevents it from cluttering the view when you’re still near the top.

Visual States

Hidden (at top of page):

┌────────────────────────┐
│  [Header]              │
│                        │
│  Content starts here   │
│                        │  (No button visible)
│                        │
└────────────────────────┘

Visible (after scrolling):

┌────────────────────────┐
│                        │
│  Content (scrolled)    │
│                        │
│  More content...       │
│                   [↑]  │ ← Button appears
└────────────────────────┘

Click Behavior

When clicked, the button:

Smoothly animates scroll back to top (300ms duration)
Uses easing for natural feel (not instant jump)
Remains visible during scroll
Fades out once at the top

Animation:

User at bottom → Click [↑] → Smooth scroll animation → Arrive at top
     ↓                ↓                    ↓                ↓
  Visible         Scrolling            Scrolling         Hidden

Button Design

Default Appearance

The BuddyX Pro scroll to top button has a clean, modern design:

Property	Style
Shape	Circular
Icon	Up arrow (↑)
Size	40px × 40px
Color	Theme primary color
Background	Solid with subtle shadow
Position	Bottom-right corner
Distance from edge	20px from bottom, 20px from right

Visual:

                Screen Edge
                    ↓
        ┌───────────────────┐
        │                   │
        │   Your Content    │
        │                   │
        │                   │
        │              [↑]  │ ← 20px from right
        └───────────────────┘
                         ↑
                    20px from bottom

Mobile Appearance

On mobile devices, the button automatically adjusts:

Device	Adjustments
Phone	Slightly smaller (35px), positioned to avoid thumb zone
Tablet	Standard size maintained
Landscape	Positioned to avoid keyboard area

When to Use Scroll to Top

Highly Recommended For:

Page Type	Why
Blog posts	Long articles need easy navigation back to menu
Product archives	Shoppers browsing many products
Member directories	Long lists of community members
Activity feeds	Social feeds with infinite scroll
Course listings	Educational sites with many courses
Forum topics	Long discussion threads

Less Critical For:

Page Type	Why
Homepage	Often short, above-the-fold focused
Contact page	Usually single-screen
Login/Register	Short forms, no scrolling
Landing pages	Designed to scroll through linearly
Single-product pages	Return to top less needed

Customization Options

While BuddyX Pro includes a styled button by default, you can customize it with CSS.

Change Button Color

Add to Appearance > Customize > Additional CSS:

/* Custom button background */
.scrollup {
    background-color: #007bff !important; /* Blue */
}

/* Hover effect */
.scrollup:hover {
    background-color: #0056b3 !important; /* Darker blue */
}

Change Button Size

/* Larger button */
.scrollup {
    width: 50px !important;
    height: 50px !important;
    font-size: 20px !important;
}

Change Button Position

/* Move to left side */
.scrollup {
    right: auto !important;
    left: 20px !important;
}

/* Move higher from bottom */
.scrollup {
    bottom: 40px !important;
}

Change Button Shape

/* Square button */
.scrollup {
    border-radius: 4px !important; /* Less rounded */
}

/* Pill shape */
.scrollup {
    border-radius: 25px !important;
    width: 50px !important;
    height: 50px !important;
}

Custom Icon

/* Use different arrow style */
.scrollup::before {
    content: "⬆" !important; /* Different arrow */
    font-size: 24px;
}

Recommended Setups by Site Type

Blog / Magazine

Scroll Top: Yes
Trigger Distance: 300px (default)
Position: Bottom-right

Why: Long articles benefit greatly from quick return to navigation.

E-Commerce Store

Scroll Top: Yes
Trigger Distance: 300px
Position: Bottom-right (avoid cart button)

Why: Shoppers browse many products and need easy access to header cart/menu.

Community Platform

Scroll Top: Yes
Trigger Distance: 200px (earlier)
Position: Bottom-right

Why: Activity feeds are infinitely scrolling; members need quick navigation.

Corporate Website

Scroll Top: Yes
Trigger Distance: 400px (later)
Position: Bottom-right

Why: Professional sites with longer content pages benefit from the feature.

Landing Page

Scroll Top: No
Trigger Distance: N/A

Why: Landing pages are designed for linear, downward scrolling to CTA.

Portfolio Site

Scroll Top: Optional
Trigger Distance: 500px
Position: Bottom-left (avoid contact button)

Why: Gallery-style portfolios may not need it; depends on layout.

Educational Platform

Scroll Top: Yes
Trigger Distance: 300px
Position: Bottom-right

Why: Course listings and lesson content often require scrolling.

User Experience Best Practices

Practice	Why
Don’t show immediately	Appearing too early feels intrusive
Smooth animation	Instant jumps are jarring
Visible but subtle	Should help, not distract
Consistent position	Users learn where to look
Responsive size	Work on all devices

Accessibility Features

BuddyX Pro’s scroll to top button includes accessibility considerations:

Feature	Benefit
Keyboard accessible	Can be triggered with Enter/Space
ARIA label	Screen readers announce “Scroll to top”
Focus indicator	Visible outline when focused
Touch-friendly	Large enough for finger taps
High contrast	Visible to users with vision impairments

For Users with Motion Sensitivity:

The smooth scroll respects the prefers-reduced-motion CSS media query. Users who’ve set this preference get instant scroll (no animation).

Performance Considerations

Aspect	Impact
File size	~2KB JavaScript (minimal)
Scroll performance	Uses optimized scroll detection
Animation	CSS-based (hardware accelerated)
Load time	No impact on page load speed

Best Practices:

Button loads asynchronously
Scroll detection is throttled
No impact on Core Web Vitals
Works with lazy loading plugins

Common Questions

Can I disable scroll to top on specific pages? Yes, with custom code or page meta boxes. By default, it applies site-wide when enabled.

Does the button work on mobile? Yes! The button is fully responsive and touch-friendly on all mobile devices.

Why doesn’t the button appear immediately? It only shows after scrolling 300px to avoid cluttering the view when you’re near the top.

Can I change the button icon? Yes, with custom CSS. You can use different arrows, text, or custom icons.

Does it work with infinite scroll? Yes! The button works perfectly with infinite scroll features on activity feeds and archives.

Will it slow down my site? No. The scroll to top button is extremely lightweight and has no measurable performance impact.

Can I have multiple scroll buttons? Not recommended. One scroll to top button is standard practice and avoids confusion.

Does it work with sticky headers? Yes! The button scrolls to the absolute top, which includes sticky headers.

Why would I disable this feature? Some minimalist designs or short-page sites don’t need it. Landing pages often disable it to encourage downward scrolling.

Troubleshooting

Button Not Appearing

Solutions:

Verify setting is enabled in Customizer > General > Scroll Top
Scroll down at least 300px on the page
Clear browser cache and theme caches
Check browser console for JavaScript errors
Disable other plugins temporarily to check for conflicts

Button Not Scrolling

Solutions:

Check for JavaScript errors in browser console
Verify jQuery is loading properly
Test in a different browser
Disable conflicting smooth scroll plugins

Button Appears in Wrong Position

Solutions:

Check for conflicting CSS from other plugins
Inspect element to see what’s overriding position
Add !important to your custom CSS positioning
Check for fixed/sticky elements blocking the button

Button Looks Different Than Expected

Solutions:

Clear all caches (browser, plugin, CDN)
Check if custom CSS is being applied
Inspect element to see inherited styles
Verify theme is updated to latest version

Alternative Solutions

If you need more control over scroll behavior:

Plugin	Features
WPFront Scroll Top	Multiple icon options, custom images
Scroll to Top	Extensive position and style controls
Dynamic Scroll to Top	Progress indicator, custom triggers

Note: BuddyX Pro’s built-in button is optimized and sufficient for most sites.

Related Settings

Sticky Header – Works with scroll to top button
Site Layout – Overall page layout settings
Mobile Header – Mobile navigation options
Footer Settings – Bottom of page elements

Need Help?

Visit our Documentation Portal
Contact Support at support@wbcomdesigns.com