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

The Up together with Down buttons tin sack survive used to navigate to the exceed together with bottom of the page content, particularly when on the primary page are many articles or when an article has likewise many comments. These buttons convey a fadeIn together with fadeOut effect, this agency that they volition fade slightly when nosotros are scrolling to the exceed or bottom of the page together with additionally, convey the component of going up/down the blog.

Demo

You tin sack encounter a alive demonstrate on my blog, the buttons are located on the correct side.

How to seat Go Up together with 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 surface area together with press the CTRL + F keys to opened upwards the Blogger search box

Step 3. Copy together with glue the next slice of code within the search box inwards gild to detect it:

]]></b:skin>

Step 4. Just higher upwards ]]></b:skin> glue this one:

/* Up together with Down Buttons amongst jQuery
----------------------------------------------- */
.button_up{
padding:7px; /* Distance betwixt the edge together with the icon */
background-color:white;
border:1px enterprise #CCC; /* Border Color */
position:fixed;
background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWoUT9faz60snWSMKt81jHx_OwACqbe9dXYPcoNUbEL47NkQw0f2s6BmJigSUomuk7yjvzUWvn3GtnyammOxBvM2toBDzBii7lELGrtxKOzWvRnMo3WYgXxlTH9RhIdLkBYtQcewBGmAU/s16/arrow_up.png) no-repeat exceed left;
background-position:50% 50%;
width:20px; /* Button's width */
height:20px; /* Button's pinnacle */
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 together with the icon */
background-color:white;
border:1px enterprise #CCC; /* Border Color */
position:fixed;
background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitK36GFPDx0WB3lNZ8tUkdyO0ZsNCkv6myCo578Ba78yauU3RIkewTwpI_HzFIgS6_wz-bFB5RNP_xocZsNnh7n-s9htcNEfarC4Eq4fVZrx64rDwH97nXuUMB2lfbwsBlFsU44uJ-Ovw/s16/arrow_down.png) no-repeat exceed left;
background-position:50% 50%;
width:20px; /* Button's width */
height:20px; /* Button's pinnacle */
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:  - inwards green are around annotations that explains what styles y'all tin sack modify on their left side.
           - You tin sack alter the arrows past times changing the URLs inwards 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 merely higher upwards 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(
component (e) {
$('html, body').animate({scrollTop: $elem.height()}, 800);
} );
$('#button_up').click(
component (e) {
$('html, body').animate({scrollTop: '0px'}, 800);
} );});
//]]>
</script>

Note: In illustration y'all desire to take the "Go to top" button, take the 1st bolded code together with to take the "Go to bottom" button, take the s one.

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

Share this post