How to Add a “Back To Top” Button to Any Blog (Blogger, WordPress)
Having a lot of content means a lot of scrolling. It helps to make things a little easier for your readers if you include an easy way to jump all the way back to the top of the page. Adding a Back To Top button can easily solve scrolling issues and is really simple to implement! I’ve included a really easy Back To Top button here for you that you can add to any website or blog. All you need to edit are the theme’s CSS file and the main HTML template file.
Add a Back To Top button to your site:
To get started, add this to the CSS section of your site. In Blogger, this would be under Template > Customize > Advanced > CSS. In WordPress this is your theme’s style.css file..back-to-top {
display:none;
position: fixed;
bottom: 2em;
right: 0px;
text-decoration: none;
color: #000000;
background-color: rgba(235, 235, 235, 0.80);
font-size: 12px;
padding: 1em;
}
.back-to-top:hover {
background-color: rgba(135, 135, 135, 0.50);
text-decoration:none;
color:#ffffff;
}
Then, make sure your site is loading jQuery. Add this code in the <head> section of your template’s main HTML file:<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>If you already have a similar jquery script in there, you don’t need to add this one. One jQuery script is enough! Next, add the following code directly before the </body> code in your template’s main HTML file. In Blogger, go to Template > Edit HTML and search for </body> and add this above it:
<a href="#" class="back-to-top">Back to Top</a>
<script>
jQuery(document).ready(function() {
var offset = 220;
var duration = 500;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery('.back-to-top').fadeIn(duration);
} else {
jQuery('.back-to-top').fadeOut(duration);
}
});
jQuery('.back-to-top').click(function(event) {
event.preventDefault();
jQuery('html, body').animate({scrollTop: 0}, duration);
return false;
})
});
</script>
Save your template and you should see the Back to Top link appear as you scroll down the page!
Thank You for the information as i would introduce you the new leading wordpress theme for ecommerce to any type of commercial business, for personal branding or for agency wordpress theme also. It comes with various wordpress addons and premium features too. Don't forget to visit Cozy Theme.
ReplyDelete"Thank you for breaking this down so well! This post is truly valuable."
ReplyDelete