How To Add Scroll to Top/Bottom Buttons with JQuery In Blogger

When there are many articles on the main page or when an article has too many comments, the Up and Down buttons can be used to navigate to the top and bottom of the page. These buttons. These buttons have  a function of going up/down the blog and they will fade slightly when we are scrolling to the top or bottom of the page.

Adding Scroll to Top/Bottom Buttons Using JQuery To Blogger

Step 1: Go to Blogger Dashboard >> Template >> Hit the Edit HTML Button

Step 2: Now search (Ctrl + F) this ]]></b:skin> code

Step 3: Add the following code just above/before it

/* Up and Down Buttons with jQuery
----------------------------------------------- */
.button_up{
padding:7px;
background-color:white;
border:1px solid #CCC;
position:fixed;
background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEie-mZXB9rVpLrJqATw0dmlPJ3RBbG3BiyrmtwnjF9NIsrV07ugzT8TfBhLJH3WtppiisFKHbnWvGicowfWlGQB6qG4fBlr0LRdT-Ubm006k5V7FcqwdmeZXgJnYL-1IHnILwJKCrYL8Gs/s16/arrow_up.png) no-repeat top left;
background-position:50% 50%;
width:20px;
height:20px;
bottom:280px;
right:5px;
white-space:nowrap;
cursor: pointer;
border-radius: 3px 3px 3px 3px;
opacity:0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
.button_down{
padding:7px;
background-color:white;
border:1px solid #CCC;
position:fixed;
background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0jFpDXhoQxd7uVRWBchzxIRsP4fI4W7NFs9QdxtxnLi0bUvWlCiS3iHD8FSBbwDHK7XkoiX2ISeYF7zbMCREnHBLW1tQyaKV8XaiYZUP7iZmFsWltkvX2cva5m9K8WI22gAM4ctDGVF0/s16/arrow_down.png) no-repeat top left;
background-position:50% 50%;
width:20px;
height:20px;
bottom:242px;
right:5px;
white-space:nowrap;
cursor: pointer;
border-radius: 3px 3px 3px 3px;
opacity:0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}

Step 4: Now Search (Ctrl + F) for </body> this code

Step 5: And Just above it paste the following code

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>

<div class='button_up' id='button_up' style='display:none;'/>
<div class='button_down' id='button_down' style='display:none;'/>

<script>
//<![CDATA[
(function(){var special=jQuery.event.special,uid1='D'+(+new Date()),uid2='D'+(+new Date()+1);special.scrollstart={setup:function(){var timer,handler=function(evt){var _self=this,_args=arguments;if(timer){clearTimeout(timer)}else{evt.type='scrollstart';jQuery.event.handle.apply(_self,_args)}timer=setTimeout(function(){timer=null},special.scrollstop.latency)};jQuery(this).bind('scroll',handler).data(uid1,handler)},teardown:function(){jQuery(this).unbind('scroll',jQuery(this).data(uid1))}};special.scrollstop={latency:300,setup:function(){var timer,handler=function(evt){var _self=this,_args=arguments;if(timer){clearTimeout(timer)}timer=setTimeout(function(){timer=null;evt.type='scrollstop';jQuery.event.handle.apply(_self,_args)},special.scrollstop.latency)};jQuery(this).bind('scroll',handler).data(uid2,handler)},teardown:function(){jQuery(this).unbind('scroll',jQuery(this).data(uid2))}}})();

$(function() {
var $elem = $('body');
$('#button_up').fadeIn('slow');
$('#button_down').fadeIn('slow');
$(window).bind('scrollstart', function(){
$('#button_up,#button_down').stop().animate({'opacity':'0.2'});
});
$(window).bind('scrollstop', function(){
$('#button_up,#button_down').stop().animate({'opacity':'1'});
});
$('#button_down').click(
function (e) {
$('html, body').animate({scrollTop: $elem.height()}, 800);
} );
$('#button_up').click(
function (e) {
$('html, body').animate({scrollTop: '0px'}, 800);
} );});
//]]>
</script>

Note: If you want to remove Go to top button, remove the 1st bolded code or if you want to remove the Go to bottom button, remove the 2nd bolded code
Step 6: All Done ! Save your template and enjoy...

---> Do you enjoy this article? Share it with friends/followers and subscribe to this blog now, for you to stay updated with our latest posts.

Share This:

Tags:

Widgets

• Prevoius
• Next