Below are the easy steps to add a "Scroll to Top" button to a WordPress website.
Step-1 Add this Div in footer.php
Step-2 Add this Java script in footer.php
jQuery(function() { jQuery(window).scroll(function() { if(jQuery(this).scrollTop() > 300) { jQuery('#back_top').fadeIn(); } else { jQuery('#back_top').fadeOut(); } }); jQuery('#back_top').click(function() { jQuery('body,html').animate({scrollTop:0},500); }); });
Step-3 Add this CSS in theme's style.css
#back_top { background-color: red; bottom: 22px; cursor: pointer; display: none; height: 44px; position: fixed; right: 200px; width: 54px; }
Summary
- Add the
<div>
for the button infooter.php
. - Include the JavaScript for detecting scroll and enabling smooth scrolling.
- Style the button using CSS in your theme’s
style.css
.
Once implemented, your website will have a functional and visually appealing "Scroll to Top" button. Customize it further to match your site's design!
No comments:
Post a Comment