WDD Back To Top

Getting Started

Overview

WDD Back To Top places a fixed arrow button on every page of your site. When a visitor scrolls down past a configurable distance, the button fades in and smoothly scrolls them back to the top when clicked. Everything — colour, size, position, speed — is controlled from a single settings page in the WordPress admin.

Version 2.0.0 introduced an optional Scroll to Bottom button: a mirrored counterpart that appears at the top of the scroll range and guides visitors to the bottom of the page. Both buttons are completely independent and have no shared settings.

Getting Started

Installation

1. 1
   Upload the plugin folder

   Copy the wdd-back-to-top folder into your /wp-content/plugins/ directory via FTP, SFTP, or your host's file manager.

2. 2
   Activate the plugin

   Go to Plugins → Installed Plugins in your WordPress admin and click Activate next to WDD Back To Top.

3. 3
   Open the settings page

   Navigate to Settings → WDD Back To Top. The Back to Top button is active immediately. Customise both buttons and save.

Features

⬆Back To Top

The Back to Top button is always enabled. It hides itself with opacity: 0 and pointer-events: none until the visitor scrolls past the configured threshold, then fades in with a subtle upward slide. Clicking — or pressing Enter when focused — starts a smooth jQuery scroll animation back to scrollTop: 0.

Appearance

The arrow is a pure SVG drawn with two paths — a vertical stem and a chevron head. You control the stroke colour, height, line weight, and whether a drop shadow renders beneath it via filter: drop-shadow().

Position

Choose left or right side. Set the distance from the bottom of the viewport and the distance from the chosen edge — both in pixels. The opposite edge is always set to auto so no layout conflict occurs.

Behaviour

Show After Scrolling is the number of pixels the visitor must scroll before the button appears. Scroll Speed is the jQuery animation duration in milliseconds. Both are applied via wp_localize_script() so they're always in sync with your saved settings.

Features

⬇Scroll To Bottom

The Scroll to Bottom button is disabled by default. When disabled, no HTML is rendered, no CSS is output, and the JavaScript skips all STB logic — it has zero front-end cost until you turn it on.

Once enabled, it works on the inverse logic of the Back to Top button: it shows when there is still scrollable content below and hides when the remaining scroll distance drops below the configured threshold.

Visibility logic

// Remaining distance to the bottom of the page
function remainingScroll() {
  return $( document ).height()
       - $( window ).height()
       - $( window ).scrollTop();
}

// STB is visible while more than STB_THRESHOLD px remain
if ( remainingScroll() > STB_THRESHOLD ) {
  $stb.addClass( 'wdd-stb-visible' );
} else {
  $stb.removeClass( 'wdd-stb-visible' );
}

Default placement

The STB button defaults to the left side of the screen, keeping it on the opposite side from the BTT button (which defaults to the right). This means both buttons coexist visually without overlapping straight out of the box. You can move either button to any side with any offset.

Reference

All Settings

Every setting is stored in a single WordPress option (wdd_btt_options) as a serialised array. All values are sanitised and range-clamped on save.

⬆ Back To Top

⬇ Scroll To Bottom

Reference

Compatibility

WDD Back To Top is tested against the most widely-used caching and optimisation plugins. The table below summarises what was verified in the v2.0.1 test suite.

Reference

Developer Notes

Option key

All settings are stored under a single WordPress option. Retrieve it in code like this:

$opts = get_option( 'wdd_btt_options', array() );

// Or use the static helper which merges defaults automatically:
$opts = WDD_BTT_Settings::get();

Minified asset switching

The plugin checks SCRIPT_DEBUG at runtime to decide which file to serve:

// Returns '.min' in production, '' when SCRIPT_DEBUG is true
function wdd_btt_asset_suffix() {
  return ( defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ) ? '' : '.min';
}

WP Rocket exclusion

The script handle is excluded automatically. You do not need to add it manually in WP Rocket's settings:

add_filter( 'rocket_excluded_handles', function( $handles ) {
  $handles[] = 'wdd-back-to-top';
  return $handles;
} );

Dynamic CSS delivery

Position, colour, size, and shadow values are not hardcoded in the stylesheet. They are injected as an inline <style> block by PHP via wp_add_inline_style(), attached to the plugin's CSS handle. This avoids cache-busting issues when settings change and keeps the static CSS files purely structural.

Resetting to defaults

The Reset Defaults button in the admin generates a nonce-protected GET request. You can also reset programmatically:

delete_option( 'wdd_btt_options' );
// The plugin will fall back to WDD_BTT_Settings::defaults() on next load.

About

Changelog

About

FAQ