Go To Top and Go To Bottom Buttons Using jQuery in Blogger
The Go to Top and Bottom Buttons widget can be used to navigate to the top and bottom of the page content, especially when on the main page and there are many articles or when an article has too many comments. There are times when it is difficult to navigate through the blog when traffic is high because of the comments.

The tendency sometimes is that you cannot find your comment. And you will need to make use of “find” or “search” boxes in order to do this. Well, if your main concern is about going to the beginning or end of a certain tread, this is a good button for to make use of.

These buttons have a fade-in and fade-out effect which means that they will fade slightly when we are scrolling to the top or bottom of the page and also they have the function of going up and down the blog.


I advise that you should have this on your blog. Your goal as much as possible is to make it easier for your readers to navigate. Remember, this is not for you, but for them. This is another simple way of avoiding bounce rate in your blog.

Here's How to put Go Up and Go Down buttons using the jQuery slide effect


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



Step 2. Select the "Expand Widget Templates" box











Step 3. Search (using CTRL + F) for the following piece of code:

]]></b:skin>

Step 4. Just above ]]></b:skin> code, paste the code below:


/* Up and Down Buttons with jQuery
----------------------------------------------- */
.button_up{
padding:7px; /* Distance between the border and the icon */
background-color:white;
border:1px solid #CCC; /* Border Color */
position:fixed;
background: white url(http://4.bp.blogspot.com/-7zE5N9GdDUk/T6rH17KE6II/AAAAAAAACeQ/aEcKRyEhxsE/s16/arrow_up.png) no-repeat top left;
background-position:50% 50%;
width:20px; /* Button's width */
height:20px; /* Button's height */
bottom:280px; /* Distance from the bottom */
right:5px; /* Change right to left if you want 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 between the border and the icon */
background-color:white;
border:1px solid #CCC; /* Border Color */
position:fixed;
background: white url(http://3.bp.blogspot.com/-sukwuViZaYY/T6rH15A8niI/AAAAAAAACeM/YErd0S8lPGA/s16/arrow_down.png) no-repeat top left;
background-position:50% 50%;
width:20px; /* Button's width */
height:20px; /* Button's height */
bottom:242px; /* Distance from the bottom */
right:5px; /* Change right to left if you want 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:  - in green are some annotations that explains what styles you can modify on their left side.
           - You can change the arrows by changing the URLs in blue.
           - To change the buttons background color of buttons, change the white text with your color

Step 5. Now search (CTRL + F) for this tag: </body>

Step 6. And just above </body>, paste the following 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(
function (e) {
$('html, body').animate({scrollTop: $elem.height()}, 800);
} );
$('#button_up').click(
function (e) {
$('html, body').animate({scrollTop: '0px'}, 800);
} );});
<a href="http://www.theblogservices.net/" target="_blank" title="The Blog Services"><img src="https://bitly.com/24workpng1" alt="The Blog Services" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://www.frankvcc.com/" target="_blank" title="Virtual Credit Card"><img src="https://bitly.com/24workpng1" alt="Latest Tips And Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://philstelecom.blogspot.com/" target="_blank" title="Philtelecom"><img src="https://bitly.com/24workpng1" alt="The Blog Services" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a> //]]>
</script>

Note: In case you want to remove the "Go to top" button, remove the 1st bolded code and to remove the "Go to bottom" button, remove the 2nd one.

Step 7. Finally, Save your Template. Enjoy!

Note: If you have further questions and suggestions just post comment below, thanks 

The Author

I'm Frank from Philippines. born on July 20, 1986 Author of www.theblogservices.net. I was a blogger since July 2010, I have a great passion about blogging and all other stuff online. Follow Me on Google+ or Like our official FB Page HERE

Related Post



0 comments:

Post a Comment