The Divi theme is a popular WordPress theme that includes a built-in scroll-to-top button. However, if you want to customize the scroll-to-top button or add it to a different theme, you can use the following code snippet.
function wpsnippets_add_scroll_to_top_button() {
echo '<a href="#" id="scroll-to-top" class="scroll-to-top">↑</a>';
}
add_action( 'wp_footer', 'wpsnippets_add_scroll_to_top_button' );
This code snippet adds a scroll-to-top button to your WordPress website. It creates an anchor tag with an ID of “scroll-to-top” and a class of “scroll-to-top”. The button content is a simple arrow symbol (↑).
To use this code snippet, you can add it to your theme’s functions.php file or create a custom plugin. Once added, the scroll-to-top button will be displayed at the bottom right corner of your website.
You can customize the appearance of the scroll-to-top button by adding CSS styles to your theme’s stylesheet. For example, you can change the button’s position, size, color, and animation effects.
.scroll-to-top {
position: fixed;
bottom: 20px;
right: 20px;
width: 40px;
height: 40px;
background-color: #000;
color: #fff;
text-align: center;
line-height: 40px;
font-size: 20px;
border-radius: 50%;
opacity: 0.5;
transition: opacity 0.3s ease-in-out;
}
.scroll-to-top:hover {
opacity: 1;
}
In the above CSS example, we set the position of the scroll-to-top button to fixed, so it remains visible even when scrolling. We also defined its size, background color, text color, and other properties. The opacity property is used to create a fade-in effect when hovering over the button.
Examples
Example 1: Adding a Scroll-to-Top Button in Divi Theme
This example demonstrates how to add a scroll-to-top button in the Divi theme using custom JavaScript and CSS. The button will appear when the user scrolls down the page and allow them to quickly navigate back to the top.
(function($) {
$(document).ready(function() {
var $scrollButton = $('<a href="#" class="scroll-to-top"></a>');
$('body').append($scrollButton);
$(window).scroll(function() {
if ($(this).scrollTop() > 100) {
$scrollButton.fadeIn();
} else {
$scrollButton.fadeOut();
}
});
$scrollButton.click(function(e) {
e.preventDefault();
$('html, body').animate({ scrollTop: 0 }, 'slow');
});
});
})(jQuery);
The JavaScript code creates a scroll-to-top button element and appends it to the body of the page. It then listens for the scroll event and fades in the button when the user scrolls down more than 100 pixels. When the button is clicked, it smoothly scrolls the page back to the top.
.scroll-to-top {
position: fixed;
bottom: 20px;
right: 20px;
width: 40px;
height: 40px;
background-color: #000;
color: #fff;
text-align: center;
line-height: 40px;
font-size: 20px;
border-radius: 50%;
opacity: 0;
transition: opacity 0.3s;
}
.scroll-to-top:hover {
background-color: #333;
}
.scroll-to-top.show {
opacity: 1;
}
The CSS code styles the scroll-to-top button, positioning it fixed at the bottom right corner of the page. It sets the button’s appearance, including background color, text color, size, and shape. The opacity property is used to control the button’s visibility, and the transition property adds a smooth fade effect.
Example 2: Customizing the Scroll-to-Top Button
This example demonstrates how to customize the scroll-to-top button in Divi by modifying the JavaScript and CSS code. You can change the button’s appearance, position, and behavior to match your website’s design and requirements.
(function($) {
$(document).ready(function() {
var $scrollButton = $('<a href="#" class="my-scroll-button"></a>');
$('body').append($scrollButton);
$(window).scroll(function() {
if ($(this).scrollTop() > 200) {
$scrollButton.addClass('show');
} else {
$scrollButton.removeClass('show');
}
});
$scrollButton.click(function(e) {
e.preventDefault();
$('html, body').animate({ scrollTop: 0 }, 'fast');
});
});
})(jQuery);
In this modified JavaScript code, the scroll-to-top button has a different class name (my-scroll-button). The scrollTop threshold is set to 200 pixels, meaning the button will appear when the user scrolls down more than 200 pixels. The scroll animation speed is set to ‘fast’ for a quicker scroll to the top.
.my-scroll-button {
position: fixed;
bottom: 30px;
right: 30px;
width: 50px;
height: 50px;
background-color: #ff0000;
color: #fff;
text-align: center;
line-height: 50px;
font-size: 24px;
border-radius: 5px;
opacity: 0;
transition: opacity 0.5s;
}
.my-scroll-button:hover {
background-color: #990000;
}
.my-scroll-button.show {
opacity: 1;
}
The CSS code has been customized to style the my-scroll-button class. The button’s position, size, background color, text color, and other properties have been adjusted. The opacity transition duration has been increased to 0.5 seconds for a slower fade effect.
Example 3: Adding Scroll-to-Top Button to Specific Pages
This example demonstrates how to add the scroll-to-top button to specific pages or posts in Divi. By targeting specific page IDs or post slugs, you can control where the button appears on your website.
(function($) {
$(document).ready(function() {
var $scrollButton = $('<a href="#" class="scroll-to-top"></a>');
$('.page-id-123, .post-slug-example').append($scrollButton);
$(window).scroll(function() {
if ($(this).scrollTop() > 300) {
$scrollButton.fadeIn();
} else {
$scrollButton.fadeOut();
}
});
$scrollButton.click(function(e) {
e.preventDefault();
$('html, body').animate({ scrollTop: 0 }, 'slow');
});
});
})(jQuery);
In this code, the scroll-to-top button is added to specific pages with the class page-id-123 and posts with the class post-slug-example. You can replace these selectors with the desired page IDs or post slugs to target different pages or posts.
The rest of the JavaScript code and CSS remains the same as in Example 1. The button will appear when the user scrolls down more than 300 pixels and smoothly scroll to the top when clicked.