add go to top and go to bottom buttons Using jQuery in Blogger

<div dir="ltr" style="text-align: left;" trbidi="on"><br /><div class="post-title entry-title" style="text-align: justify;"><br /><span style="font-family: inherit;"><span style="font-size: small;"><span style="font-weight: normal;"><a class="zem_slink" href="http://en.wikipedia.org/wiki/Comment_%28computer_programming%29" rel="wikipedia" title="Comment (computer programming)">/*</a><br />The Up and Down <a class="zem_slink" href="http://en.wikipedia.org/wiki/Button" rel="wikipedia" title="Button">buttons</a> can be used to navigate to the top and bottom <br />of the page content, especially when on the main page there are many <br />articles or when an article has too many comments. These buttons have a <br />fadeIn and fadeOut effect, this means that they will fade slightly when <br />we are scrolling to the top or bottom of the page and additionally, have<br /> the function of going up/down the blog.</span></span></span></div><br /><div class="separator" style="clear: both; text-align: center;"><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhw6yvEii6XwMrLkghctQpiFPsjDSEU7RHBbIyJao-BsPYqT4HN1UQ4vn2jtH9gX7PX8pG5IJoR04auOwEgUi0KZht5x98r1qLYeN_Po_I-PSOc5AEJCYuKr8pwf9nBKL0E7k-F9CrY2MpJ/s1600/how-to-add-go-to-top-go-to-bottom-buttons-in-blogger-blogspot.png" style="margin-left: 1em; margin-right: 1em;"><img alt="blogger widgets, blogger navigation" border="0" height="185" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhw6yvEii6XwMrLkghctQpiFPsjDSEU7RHBbIyJao-BsPYqT4HN1UQ4vn2jtH9gX7PX8pG5IJoR04auOwEgUi0KZht5x98r1qLYeN_Po_I-PSOc5AEJCYuKr8pwf9nBKL0E7k-F9CrY2MpJ/s200/how-to-add-go-to-top-go-to-bottom-buttons-in-blogger-blogspot.png" title="how to add back to top go to bottom navigation in blogger" width="200" /></a></div><br /><br /><br /><div class="separator" style="clear: both; text-align: center;"><br /></div><br /><div class="separator" style="clear: both; text-align: center;"><br /></div><br /><span style="color: #3d85c6;"><b><span style="font-size: medium;">Demo</span></b></span><br /><br /><br /><br />You can see a live demo on my blog, the buttons are located on the right side.<br /><br /><br /><br /><span style="color: #3d85c6;"><span style="font-size: medium;"><b>How to put Go Up and Go Down buttons using <span style="font-size: medium;">the</span> <a class="zem_slink" href="http://jquery.com/" rel="homepage" title="JQuery">jQuery</a> slide effect</b></span></span><br /><br /><br /><br /><span style="color: #6fa8dc;"><b><a class="zem_slink" href="http://en.wikipedia.org/wiki/USMLE_Step_1" rel="wikipedia" title="USMLE Step 1">Step 1</a>.</b></span> Go to Template, click on the Edit <a class="zem_slink" href="http://en.wikipedia.org/wiki/HTML" rel="wikipedia" title="HTML">HTML</a> button<br /><br /><br /><br /><div class="separator" style="clear: both; text-align: center;"><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUNh1FiiNZ31MGbDiJU-lZCrTbOZ7vwCD6d5_T2EToIWiIAi_3bWKsNxRQiD5e8zVS-u68aCEQxejs3FrFf1O-waUGNfXeDoeMMwkmKcUe2VhW8fjiLqDkaG3ptxkzN2oYpem0b8idN16L/s1600/blogger-template-edit-html.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="171" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUNh1FiiNZ31MGbDiJU-lZCrTbOZ7vwCD6d5_T2EToIWiIAi_3bWKsNxRQiD5e8zVS-u68aCEQxejs3FrFf1O-waUGNfXeDoeMMwkmKcUe2VhW8fjiLqDkaG3ptxkzN2oYpem0b8idN16L/s400/blogger-template-edit-html.png" width="400" /></a></div><br /><br /><br /><span style="color: #6fa8dc;"><b>Step 2.</b> </span>Select the "Expand Widget Templates" box<br /><br /><div class="separator" style="clear: both; text-align: center;"><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2G-HEiE8LGkM42ZW-4qWXOOshkO6o4tf-TobyiYv8Cw3JsRyZJ8UhBwoAvEeCOSAmKTDWTPW6A2mn4Dp4uslq7R1tW9Kxd9AeLTwOnO1Oh9h4hz_kvkGbTwb5Jul3qd30AK-fb_SP8Sg2/s1600/blogger-expand-widget-templates.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="126" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2G-HEiE8LGkM42ZW-4qWXOOshkO6o4tf-TobyiYv8Cw3JsRyZJ8UhBwoAvEeCOSAmKTDWTPW6A2mn4Dp4uslq7R1tW9Kxd9AeLTwOnO1Oh9h4hz_kvkGbTwb5Jul3qd30AK-fb_SP8Sg2/s320/blogger-expand-widget-templates.png" width="320" /></a></div><br /><br /><br /><span style="color: #6fa8dc;"><b>Step 3.</b></span> Search (using <a class="zem_slink" href="http://en.wikipedia.org/wiki/Table_of_keyboard_shortcuts" rel="wikipedia" title="Table of keyboard shortcuts">CTRL + F</a>) for the following piece of code:<br /><br /><br /><br /><blockquote class="tr_bq"><br />]]></b:skin></blockquote><br /><br /><br /><span style="color: #6fa8dc;"><b>Step 4.</b></span> Just above this code, paste this one:<br /><br /><br /><br /><blockquote class="tr_bq"><br />/* Up and Down Buttons with jQuery<br /><br />----------------------------------------------- */<br /><br />.button_up{<br /><br />padding:7px; <span style="color: #38761d;">/* Distance between the border and the icon */</span><br /><br />background-color:white;<br /><br />border:1px solid #<a class="zem_slink" href="http://en.wikipedia.org/wiki/Civilian_Conservation_Corps" rel="wikipedia" title="Civilian Conservation Corps">CCC</a>; <span style="color: #38761d;">/* Border Color */</span><br /><br />position:fixed;<br /><br />background:<span style="color: red;"><b> <span style="color: black;">white</span> </b></span>url(<span style="color: blue;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUdelsPJ5E4HdlQd4gr-ZLwIikDFNJga8uel0exKaBYyIpof9RY4hiPLCHFE2ATK23CFK_H7NDVlE7lzgWjA5sbyKaTu-P025GBefZqVZrp2LoP-tvGx37ou6NHNjkJayi_69JxrE_drE/s16/arrow_up.png</span>) no-repeat top left;<br /><br />background-position:50% 50%;<br /><br />width:20px; <span style="color: #38761d;">/* <a class="zem_slink" href="http://en.wikipedia.org/wiki/Web_button" rel="wikipedia" title="Web button">Button</a>'s width */</span><br /><br />height:20px; <span style="color: #38761d;">/* Button's height */</span><br /><br />bottom:280px; <span style="color: #38761d;">/* Distance from the bottom */</span><br /><br />right:5px; <span style="color: #38761d;">/* Change right to left if you want the buttons on the left */</span><br /><br />white-space:nowrap;<br /><br />cursor: pointer;<br /><br />border-radius: 3px 3px 3px 3px;<br /><br />opacity:0.7; <br /><br />filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);<br /><br />}<br /><br />.button_down{<br /><br />padding:7px; <span style="color: #38761d;">/* Distance between the border and the icon */</span><br /><br />background-color:white;<br /><br />border:1px solid #CCC; <span style="color: #38761d;">/* Border Color */</span><br /><br />position:fixed;<br /><br />background:<b><span style="color: red;"> <span style="color: black;">white </span></span></b>url(<span style="color: blue;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAZwTfp2whlkvJ8Potpv9stHiT6hE9crgoWGZYVpeZYo9VbdAmcZufhMsufDivyPZrc7lRTQvCg_5XODmo2gIXy5WOY30DrP9gjngdBlEan1qvaQcW3x5TkughVhQKhpHTpr1CPIIZ58s/s16/arrow_down.png</span>) no-repeat top left;<br /><br />background-position:50% 50%;<br /><br />width:20px; <span style="color: #38761d;">/* Button's width */</span><br /><br />height:20px; <span style="color: #38761d;">/* Button's height */</span><br /><br />bottom:242px;<span style="color: #38761d;"> /* Distance from the bottom */</span><br /><br />right:5px; <span style="color: #38761d;">/* Change right to left if you want the buttons on the left */</span><br /><br />white-space:nowrap;<br /><br />cursor: pointer;<br /><br />border-radius: 3px 3px 3px 3px;<br /><br />opacity:0.7;<br /><br />filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);<br /><br />}</blockquote><br /><br /><br /><b>Note:</b>  - in <span style="color: #38761d;">green </span>are some annotations that explains what styles you can modify on their left side.<br /><br />           - You can change the arrows by changing the <a class="zem_slink" href="http://en.wikipedia.org/wiki/Uniform_resource_locator" rel="wikipedia" title="Uniform resource locator">URLs</a> in <span style="color: blue;">blue</span>.<br /><br />           - To change the buttons background color of buttons, change the <b>white</b> text with your color <br /><br /><br /><br /><b><span style="color: #6fa8dc;">Step 5.</span></b> Now search (CTRL + F) for this tag:<br /><br /><br /><br /><blockquote><br /></body></blockquote><br /><br /><br /><span style="color: #6fa8dc;"><b>Step 6. </b></span>And just above it, paste the following code:<br /><br /><br /><br /><blockquote class="tr_bq"><br /><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/><br /><br /><br /><br /><b><div class='button_up' id='button_up' style='display:none;'/></b><br /><br /><b><div class='button_down' id='button_down' style='display:none;'/></b><br /><br /><br /><br /><script><br /><br />//<!--[<a class="zem_slink" href="http://en.wikipedia.org/wiki/CDATA" title="CDATA" rel="wikipedia"-->CDATA[<br /><br />(function(){var special=jQuery.event.special,uid1='D'+(+new <br />Date()),uid2='D'+(+new <br />Date()+1);special.scrollstart={setup:function(){var <br />timer,handler=function(evt){var <br />_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<br /> timer,handler=function(evt){var <br />_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))}}})();<br /><br /><br /><br />$(function() {<br /><br />var $elem = $('body');<br /><br />$('#button_up').fadeIn('slow');<br /><br />$('#button_down').fadeIn('slow'); <br /><br />$(window).bind('scrollstart', function(){<br /><br />$('#button_up,#button_down').stop().animate({'opacity':'0.2'});<br /><br />});<br /><br />$(window).bind('scrollstop', function(){<br /><br />$('#button_up,#button_down').stop().animate({'opacity':'1'});<br /><br />});<br /><br />$('#button_down').click(<br /><br />function (e) {<br /><br />$('html, body').animate({scrollTop: $elem.height()}, 800);<br /><br />} );<br /><br />$('#button_up').click(<br /><br />function (e) {<br /><br />$('html, body').animate({scrollTop: '0px'}, 800);<br /><br />} );});<br /><br />//]]><br /><br /></script></blockquote><br /><br /><br /><b>Note:</b> In case you want to remove the "Go to top" button, remove <br />the 1st bolded code and to remove the "Go to bottom" button, remove the <br />2nd one.<br /><br /><br /><br /><span style="color: #6fa8dc;"><b>Step 7.</b></span> Finally, Save your Template. Enjoy!<br /><div class="post-title entry-title" style="text-align: justify;"><br /><br /></div><br /><div class="zemanta-pixie" style="height: 15px; margin-top: 10px;"><br /><img alt="" class="zemanta-pixie-img" src="http://img.zemanta.com/pixy.gif?x-id=0385d58c-c4b5-4fc4-ac42-9b4d1148e48a" style="border: none; float: right;" /></div><br /></div><br />

• 
• 
• 
• 

1. 1
2. 2
3. 3
4. 4

• Previous
• Next

add go to top and go to bottom buttons Using jQuery in Blogger

/*The Up and Down buttons can be used to navigate to the top and bottom of the page content, especially when on the main page there are many articles or when an article has too many comments. These b…

Read more »