Add Smooth Scrolling Back To Top button to Blogger blog
Add Smooth Scrolling Back To Top button to Blogger blog
The back to top button is an easy and effective way for blog readers to provide additional benefits and enhance the beauty. Many postings of the blog are seen to be very large, so after the end of the post, it has to come up with the help of the mouse. After reading a few posts, this work has become annoying to the reader. Using this type of Back to Top button will help protect your readers from being irritated, as well as take advantage of your blog's acceptability.
It is made up of fully compatible with CSS3 and JavaScript. Font Awesome has been used as an icon. Clicking this button can be conveniently positioned above the blog. Note that we have already shared such a Back To Widget in our blog. Today's Live Demo can see live demo
How to add to the blog?
First login to the blog.
Then click on Template> Edit HTML.
Now press Ctrl + F to move to the keyboard]]> </ b: skin> section.
Then paste the following CSS codes]]> </ b: skin> tag.
/ * Back to Top Button
-------------------------------------- * /
back-to-top {position: fixed; opacity: 0; visibility: hidden; overflow: hidden; text-align: center; z-index: 99; background-color: # 0c9b81; color: #fff; width: 45px ; height: 45px; line-height: 44px; right: 25px; bottom: -25px; border-radius: 50px; transition: all 0.5s ease-in-out; transition-delay: 0.2s}
.back-to-top: hover {background-color: # 0caa8e; color: #fff; transition: all 0.2s ease-in-out; transition-delay: 0s}
.back-to-top.show {visibility: visible; cursor: pointer; opacity: 1; bottom: 25px}
.back-to-top i.fa {font-size: 28px; line-height: inherit}
Again, press Ctrl + F to hide the </ head> section.
Then paste the following Scripts </ head> tag above.
<script type = 'text / javascript'>
// <! [CDATA [
$ (function () {
$ (document) .on ('scroll', function () {
if ($ (window) .scrollTop ()> 100) {
$ ('back-to-top'). addClass ('show');
} else {
$ ('back-to-top'). removeClass ('show');
}
});
$ ('. back-to-top'). ('click', scrollToTop);
});
function scrollToTop () {
verticalOffset = typeof (verticalOffset)! = 'undefined'? verticalOffset: 0;
element = $ ('body');
offset = element.offset ();
offsetTop = offset.top;
$ ('html, body'). animate ({scrollTop: offsetTop}, 600, 'linear');
}
//]]>
</ script>
Again press the Ctrl + F to switch to the </ body> section.
Then paste the following code below on the </ body> tag.
<div class = 'back-to-top'>
<span class = 'back-to-top-icon'>
<i class = 'fa fa-angle-up' />
</ span>
</ div>
Save template lastly. That's all.
Note: If you do not have Jquery and Font Awesome stylesheets added to your blog, then you must add two options. You can learn more about this link from the Font Awesome key and how to add it to the blog.
The back to top button is an easy and effective way for blog readers to provide additional benefits and enhance the beauty. Many postings of the blog are seen to be very large, so after the end of the post, it has to come up with the help of the mouse. After reading a few posts, this work has become annoying to the reader. Using this type of Back to Top button will help protect your readers from being irritated, as well as take advantage of your blog's acceptability.
It is made up of fully compatible with CSS3 and JavaScript. Font Awesome has been used as an icon. Clicking this button can be conveniently positioned above the blog. Note that we have already shared such a Back To Widget in our blog. Today's Live Demo can see live demo
How to add to the blog?
First login to the blog.
Then click on Template> Edit HTML.
Now press Ctrl + F to move to the keyboard]]> </ b: skin> section.
Then paste the following CSS codes]]> </ b: skin> tag.
/ * Back to Top Button
-------------------------------------- * /
back-to-top {position: fixed; opacity: 0; visibility: hidden; overflow: hidden; text-align: center; z-index: 99; background-color: # 0c9b81; color: #fff; width: 45px ; height: 45px; line-height: 44px; right: 25px; bottom: -25px; border-radius: 50px; transition: all 0.5s ease-in-out; transition-delay: 0.2s}
.back-to-top: hover {background-color: # 0caa8e; color: #fff; transition: all 0.2s ease-in-out; transition-delay: 0s}
.back-to-top.show {visibility: visible; cursor: pointer; opacity: 1; bottom: 25px}
.back-to-top i.fa {font-size: 28px; line-height: inherit}
Again, press Ctrl + F to hide the </ head> section.
Then paste the following Scripts </ head> tag above.
<script type = 'text / javascript'>
// <! [CDATA [
$ (function () {
$ (document) .on ('scroll', function () {
if ($ (window) .scrollTop ()> 100) {
$ ('back-to-top'). addClass ('show');
} else {
$ ('back-to-top'). removeClass ('show');
}
});
$ ('. back-to-top'). ('click', scrollToTop);
});
function scrollToTop () {
verticalOffset = typeof (verticalOffset)! = 'undefined'? verticalOffset: 0;
element = $ ('body');
offset = element.offset ();
offsetTop = offset.top;
$ ('html, body'). animate ({scrollTop: offsetTop}, 600, 'linear');
}
//]]>
</ script>
Again press the Ctrl + F to switch to the </ body> section.
Then paste the following code below on the </ body> tag.
<div class = 'back-to-top'>
<span class = 'back-to-top-icon'>
<i class = 'fa fa-angle-up' />
</ span>
</ div>
Save template lastly. That's all.
Note: If you do not have Jquery and Font Awesome stylesheets added to your blog, then you must add two options. You can learn more about this link from the Font Awesome key and how to add it to the blog.
No comments