Custom Scroll To Top

A lightweight, fully customizable Scroll to Top button featuring a unique SVG "cut-out" transparency effect.

Description

Custom Scroll To Top is not just another scroll button. It offers advanced styling options that allow for unique design implementations, specifically the ability to create "cut-out" icons.

Key Features:

• Custom Colors & Transparency: Set colors for the background, border, and icon independently. Crucially, you can set the opacity (transparency) for each element.
• Cut-Out Effect: By setting the Icon Opacity to 0%, you can create a "hole" in the button, allowing the website background to show through the arrow shape.
• Hover States: Define completely different colors and transparencies for the hover state.
• Positioning: Choose to display the button on the Bottom Right or Bottom Left of the screen.
• Shape: Switch between a round (circle) or square button.
• High Visibility: Uses aggressive Z-Index settings to ensure the button sits above elements like Revolution Slider or other heavy overlays.
• Lightweight: No heavy frameworks, just pure vanilla JavaScript and CSS.

How the Cut-Out works: The SVG is constructed as a "puzzle". The body path has the arrow shape excluded from it. The arrow path fits exactly into that empty space. This allows you to style the arrow and the body with independent opacity levels.

Installation

1. Upload the custom-scroll-to-top folder to the /wp-content/plugins/ directory.
2. Activate the plugin through the 'Plugins' menu in WordPress.
3. Go to the "Scroll To Top" menu item in your dashboard sidebar to configure the colors and position.

Screenshots

1. The settings page allowing full color and opacity control.
2. Example of the button on the frontend.

Changelog

1.0.0

• Initial release on WordPress.org.
• Added SVG cut-out support.
• Added left/right positioning.
• Added transparency sliders.

Upgrade Notice

1.0.0

Initial release.