Easy Way To Make Back To Top Button Simple

Posted on May 14th, 2018, 302 viewed

Previously I have released an article how to make lightweight disqus comments for the website, this time I will discuss how to make the button back to top is simple and very light for blog or website.

Back to top button is one of the important features of the blog. which is where the back to top button itself is often used by visitors when visitors are reading long articles but want to go back up. back to top will appear when the visitor is in the middle of the page or below the page.

This back to top tutorial can be installed on any website like wordpress, blogger and static html.

See Also :How To Skip Yuukithemes Safelink
Add Disqus Comments To Website
How to Install Font Awesome 5

Note
1. If your theme has been installed back to top, please delete it first.
2. You must have fontawesome in your theme..

Here’s how to install back to top for wordpress and blogger

Add Back to Top Button to WordPress

1. Log in to your WordPress Dashboard.
2. Go to Appearance > Editor
3. Add the css below right in the last line (style.css)

/* Back to top */
.yk-up{background:#232931;position:fixed;bottom:35px;right:35px;padding:7px 13px;border-radius:5px;color:#FFF;font-weight:700;text-decoration:none;display:none;transition:all .3s cubic-bezier(0.4,0,1,1);cursor:pointer;}
.yk-up:hover{background:#3f85e8;}
.yk-up i{font-size:18px;font-weight:700;color:#fff;}
4. Click Update File
5. Then Select footer.php
6. Add the code below just above the </body> code (use CTRL + F in editor)
<script type="text/javascript">
$(function(){
    var ykup = $('.yk-up');
	$(window).scroll(function(){
		if ($(this).scrollTop() > 100) {
		$(ykup).fadeIn();
		} else {
		$(ykup).fadeOut();
		}
	}); 
	$(ykup).click(function(){
		$("html, body").animate({ scrollTop: 0 }, 600);return false;
	}); 
});
</script>
7. Click Update File

Add Back to Top Button in Blogger

1. Login to your Blogger Dashboard
2. Choose your blog
3. Click Menu Theme
4. Click Button Edit HTML
5. Add the code below just above the ]]></b:skin> or </style> code (use CTRL + F in editor)

/* Back to top */
.yk-up{background:#232931;position:fixed;bottom:35px;right:35px;padding:7px 13px;border-radius:5px;color:#FFF;font-weight:700;text-decoration:none;display:none;transition:all .3s cubic-bezier(0.4,0,1,1);cursor:pointer;}
.yk-up:hover{background:#3f85e8;}
.yk-up i{font-size:18px;font-weight:700;color:#fff;}
6. Add the code below just above the </body> code (use CTRL + F in editor)
<script type="text/javascript">
$(function(){
    var ykup = $('.yk-up');
	$(window).scroll(function(){
		if ($(this).scrollTop() > 100) {
		$(ykup).fadeIn();
		} else {
		$(ykup).fadeOut();
		}
	}); 
	$(ykup).click(function(){
		$("html, body").animate({ scrollTop: 0 }, 600);return false;
	}); 
});
</script>
7. Click Save

Result

Please scroll down to see the simple back to top button.

Reference
I made this article not alone, I also glanced at some references to add my insight in making this article.
– https://translate.google.com
– https://www.jqueryscript.net/other/Smooth-Page-Scroll-to-Top-with-jQuery.html

Related Post

Please wait....
Disqus comment box is being loaded