🚨 STOP LOSING READERS AT THE BOTTOM OF YOUR POSTS! You just wrote a 3,000-word masterpiece. They scroll… scroll… and vanish. One tiny button changes everything.
Imagine: A gorgeous floating arrow that pops in like magic after scrolling, then whisks them back to the top with silky-smooth animation—no jarring jumps.
No theme edits. No child theme nightmares. No “it broke my site” panic. Just copy → paste → WOW using the free Simple Custom CSS and JS plugin—your ultimate toolkit for adding unlimited CSS, JavaScript, and HTML snippets to WordPress without touching a single theme file.
Discover the power of Simple Custom CSS and JS: This lightweight, performance-optimized plugin lets you inject custom code snippets securely via file-based storage for blazing-fast loading, complete with AI-powered code generation using ChatGPT integration to spark ideas in seconds, automatic minification for speed boosts, and precise targeting through shortcodes, actions, and filters. Trusted by thousands as a “lifesaver for customizing client sites” (Sarah Mitchell) and a “game-changer for managing custom code” (Emily Chen), the free version offers unlimited snippets, error warnings, and basic management tools—no database bloat, just pure efficiency. Ready to supercharge your site? Download the free version today at simplecustomcode.com and start tweaking with confidence!
👉 Deploy in 2 minutes. Watch bounce rates plummet.
Why This Snippet Is a Game-Changer
- Appears only after scrolling → Clean design, zero clutter
- Smooth scroll animation → Feels premium (like top blogs)
- Fully customizable → Change color, position, icon, speed
- Mobile-optimized → Stays out of thumb reach
Step 1: Install & Setup the Free Plugin
- Head to your WordPress dashboard → Plugins → Add New.
- Search for “Simple Custom CSS and JS” (or visit simplecustomcode.com for direct download).
- Install and activate the free version—no credit card, unlimited snippets from day one.
- Navigate to Custom CSS & JS → Add Custom HTML Code (we’ll use the combined JS + CSS tab for efficiency). 👉 Find out more.
Step 2: Add the Complete Snippet (HTML Injection + CSS + JS in One Block)
In the plugin, create a new Custom HTML snippet. Paste the entire code below into the main editor area. Set Code Position to be End of the page. Set Loading Location to be Frontend (Site).
<style>
/* CSS: Styling & Animations */
#backTop {
position: fixed;
bottom: 25px;
right: 25px;
width: 50px;
height: 50px;
background: #007cba; /* Customize: Change to your brand color, e.g., #ff6b6b for coral */
color: white;
border: none;
border-radius: 50%;
cursor: pointer;
display: none;
align-items: center;
justify-content: center;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
z-index: 999;
transition: all 0.3s ease;
font-size: 0;
}
#backTop:hover {
background: #005a87; /* Customize: Hover color, e.g., darken your primary */
transform: translateY(-3px);
box-shadow: 0 6px 16px rgba(0,0,0,0.2);
}
#backTop.show {
display: flex;
animation: fadeIn 0.4s ease-out;
}
@keyframes fadeIn {
from { opacity: 0; transform: scale(0.8); }
to { opacity: 1; transform: scale(1); }
}
/* Smooth scroll behavior for the entire site */
html {
scroll-behavior: smooth;
}
/* Mobile tweaks */
@media (max-width: 768px) {
#backTop {
bottom: 15px;
right: 15px;
width: 45px;
height: 45px;
}
}
</style>
<script>
// JS: Button Creation, Show/Hide Logic, & Click Handler
document.addEventListener('DOMContentLoaded', function() {
// Inject the Back-to-Top Button HTML
document.body.insertAdjacentHTML('beforeend', `
<button id="backTop" title="Back to Top" aria-label="Return to top">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M12 19V5M5 12l7-7 7 7"/>
</svg>
</button>
`);
const backTop = document.getElementById('backTop');
let scrollThreshold = 300; // Customize: Pixels to scroll before showing (e.g., 200 for quicker appear, 500 for longer pages)
// Show/Hide on Scroll
window.addEventListener('scroll', function() {
if (window.scrollY > scrollThreshold) {
backTop.classList.add('show');
} else {
backTop.classList.remove('show');
}
});
// Smooth Scroll on Click
backTop.addEventListener('click', function(e) {
e.preventDefault();
window.scrollTo({ top: 0, behavior: 'smooth' });
});
// Initial check
if (window.scrollY > scrollThreshold) {
backTop.classList.add('show');
}
});
</script>
Done! Refresh any page — scroll down → button fades in → click → silky smooth return.
Detailed Customization Guide: Make It Yours in Seconds
Tweak everything right in the plugin’s editor—hit “Preview” to see changes live, no site reloads needed. Here’s how:
- Change Position:
- Bottom-right (default)? Edit bottom: 25px; right: 25px; in CSS.
- Bottom-left? Swap to bottom: 25px; left: 25px; right: auto;.
- Top-right on scroll? Use position: fixed; top: 20px; right: 20px; (but test for overlap).
- Adjust Colors:
- Primary button: #007cba → Your hex code (e.g., #28a745 for green).
- Hover state: #005a87 → A darker shade of your primary.
- Icon color: Matches text—add svg { fill: white; } if needed.
- Pro: Use CSS variables like –btn-color: #ff6b6b; for theme-wide sync.
- Appear After Scrolling:
- Default: 300px (scrollThreshold = 300;).
- Quicker (e.g., after 150px): Change to 150.
- Slower (e.g., 600px for very long posts): Set to 600.
- Always visible? Comment out the scroll check: backTop.classList.add(‘show’);.
- Icon & Size:
- Swap arrow for text (“↑”)? Replace SVG with <span>↑</span> and add font-size: 18px;.
- Bigger button? width: 60px; height: 60px; (scale SVG too).
- Animation speed: Tweak transition: all 0.3s ease; to 0.5s for slower fade.
- Advanced Targeting: In the plugin, use “Apply to specific pages” for blog posts only, or add conditions like if (document.querySelector(‘.single-post’)) { … } in JS.
Safety Note: The plugin’s error warnings catch issues before saving—plus, toggle snippets off anytime.
Download the Free Plugin Now
👉 Get Simple Custom CSS and JS – Free Forever
No bloat. No conflicts. Trusted by 10,000+ sites.