How To Add Together Larn To Elevation As Well As Larn To Bottom Buttons Using Jquery Inwards Blogger

The Up in addition to Down buttons tin last used to navigate to the overstep in addition to bottom of the page content, specially when on the primary page are many articles or when an article has also many comments. These buttons accept a fadeIn in addition to fadeOut effect, this agency that they volition fade slightly when nosotros are scrolling to the overstep or bottom of the page in addition to additionally, accept the role of going up/down the blog.

Demo

You tin meet a alive present on my blog, the buttons are located on the correct side.

How to position Go Up in addition to Go Down buttons using the jQuery slide effect

Step 1. Go to Template, click on the Edit HTML button

Step 2. Click anywhere within the code expanse in addition to press the CTRL + F keys to opened upward the Blogger search box

Step 3. Copy in addition to glue the next slice of code within the search box inward company to discovery it:

]]></b:skin>

Step 4. Just inward a higher house ]]></b:skin> glue this one:

/* Up in addition to Down Buttons amongst jQuery
----------------------------------------------- */
.button_up{
padding:7px; /* Distance betwixt the edge in addition to the icon */
background-color:white;
border:1px venture #CCC; /* Border Color */
position:fixed;
background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7Q_azQpzXVx0ktwibv-zaKsvybfoCwNbt2HNopbjIYMRrnKF1MjrO31MY4T3ubJ5lv2B7MS6kRSJAGd90j3nJM-B2yJ72JAbmWAeYCM_kwaEg1kAxVr6QRi94MAAIN6KNGuuGOI3h6YY/s16/arrow_up.png) no-repeat overstep left;
background-position:50% 50%;
width:20px; /* Button's width */
height:20px; /* Button's meridian */
bottom:280px; /* Distance from the bottom */
right:5px; /* Change correct to left if y'all desire the buttons on the left */
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; /* Distance betwixt the edge in addition to the icon */
background-color:white;
border:1px venture #CCC; /* Border Color */
position:fixed;
background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMhSsgZzRuE8N7OhC2aOVG99jSQp28lj8E_8X4KYJv44HNic6_4q7eYoqiGyqZ_u-nCi6yVDP0r_i1A3G3bikgjfyOPW2RwRIME7ga9MMQh_TSlJ9tMmya4_lAh80kzz_cpn_wMGgQC9A/s16/arrow_down.png) no-repeat overstep left;
background-position:50% 50%;
width:20px; /* Button's width */
height:20px; /* Button's meridian */
bottom:242px; /* Distance from the bottom */
right:5px; /* Change correct to left if y'all desire the buttons on the left */
white-space:nowrap;
cursor: pointer;
border-radius: 3px 3px 3px 3px;
opacity:0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}

Note:  - inward green are around annotations that explains what styles y'all tin modify on their left side.
           - You tin alter the arrows past times changing the URLs inward blue.
           - To alter the buttons background color of buttons, alter the white text amongst your color

Step 5. Now search (CTRL + F) for the next tag:

</body>

Step 6. And simply inward a higher house it, glue the code below:

<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(
role (e) {
$('html, body').animate({scrollTop: $elem.height()}, 800);
} );
$('#button_up').click(
role (e) {
$('html, body').animate({scrollTop: '0px'}, 800);
} );});
//]]>
</script>

Note: In instance y'all desire to take the "Go to top" button, take the 1st bolded code in addition to to take the "Go to bottom" button, take the 2d one.

Step 7. Finally, Save your changes past times clicking on the Save template button. Enjoy!