manifest / themes / wp-astra-scroll-top-style-plugin

Astra Scroll-to-Top Custom Style

Astra Scroll-to-Top Style – WordPress plugin to apply custom scroll-to-top button styling for the Astra theme with your preferred colors and hover effects.

by Task Virtual Services · github.com/smit-taskvirtual/wp-astra-scroll-top-style-plugin

★ 0stars

Install

Download source zip No release zip yet

This is the repository archive. It installs, but the folder name will carry the branch suffix and updates will not flow.

Install straight from GitHub with WP-CLI:

wp plugin install https://github.com/smit-taskvirtual/wp-astra-scroll-top-style-plugin/archive/refs/heads/main.zip

No built-in updater. New versions won't appear under Dashboard → Updates. Install new releases yourself, or let Git Updater track the repository.

Readme github.com/smit-taskvirtual/wp-astra-scroll-top-style-plugin ↗

Astra Scroll-to-Top Exact CSS

A simple WordPress plugin to apply custom styling to the scroll-to-top button in the Astra theme. This plugin injects your exact CSS, so you can standardize the scroll-to-top button across multiple sites without editing theme files.

Features

Overrides Astra theme's scroll-to-top button colors and size.
Includes hover animations and arrow styling.
Works immediately after activation — no configuration needed.
Keeps your CSS exactly as written.

Installation

Download or clone this repository.
Upload the astra-scroll-top-plugin folder to your WordPress site under wp-content/plugins/.
Go to WordPress Admin → Plugins.
Activate Astra Scroll-to-Top Exact CSS.
Your scroll-to-top button will now use the custom styles.

Usage

The plugin automatically applies the following CSS, which you can customize as per your website's color theme:


/* Scroll-to-top button styling */
#ast-scroll-top {
    background-color: #DB2B33 !important;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    padding: 0 !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    outline: none !important;
    border: none !important;
}

/* Arrow */
#ast-scroll-top::before {
    font-size: 24px !important;
    line-height: 1 !important;
    color: #ffffff !important;
    transition: color 0.3s ease !important;
}

/* Hover animation */
#ast-scroll-top:hover {
    background-color: #00000 !important;
    transform: scale(1.15);
    box-shadow: 0 6px 14px rgba(0,0,0,0.25);
}

/* Arrow hover */
#ast-scroll-top:hover::before {
    color: #fff !important;
}