Scroll To Top/Bottom Of The Page Widget For Blogger

To the date, there are many widgets available for your blog that gives your visitor the ability to scroll back to the top of the page with a single click on a beautiful looking button. But what if we got something special in the footer of our page. So user must have the opportunity to scroll down to the bottom of the page without any effort, same like in the opposite case.

But till now I was unable to find any good widget that does the same. Only one or two met my requirements but with a slight problem, "the installation wasn't so easy". I mean why I have to put THIS over there and THAT over there, they could have make an easier way like one click installation or an "add to blogger" button.

Anyhow, no more effort is required by your side as I have already done this for you. If you want such a widget that gives your visitor the opportunity to scroll to the top and bottom of the page simultaneously, then copy the code provided below and add an HTML/JavaScript widget to your blog.

<!====Found1s Scrolling Widget Start====>
<div class='button_up' id='button_up' style='display:none;'></div>
<div class='button_down' id='button_down' style='display:none;'></div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<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>
<style>
  .button_up {
      padding:7px;
      background-color:white;
      border:1px solid #CCC;
      position:fixed;
      background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7WjB20eaumHqSOUW_Qz6GnWnPvOY1WE9vNh9sVbrOjnjFH8OcaPbJC_KnNJPJQBQVZ0664QdMGPZflB1sH-oZPibd_W5LCZ4UfTdO3DwDAGreGfH_prGWQRuV1wjK4hxDOvA_t46E8z9k/s1600/up+arrow.png) no-repeat top left;
      background-position:50% 50%;
      width:20px;
      height:20px;
      bottom:300px;
      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/AVvXsEgmn7IFEzdrJ3Ajxds3VonjrNwpq5WK49pbWXNAZHTxssvaWUR0_5lGG7GxxB-HR-5yWJ5dvV2CyM5pkOXTcgainf5WMe5uKe2j9-lzSD9yraC9MTCqRvhyprdl6Sdu4G3EptAi-GA_2FWH/s1600/down+arrow.png) no-repeat top left;
      background-position:50% 50%;
      width:20px;
      height:20px;
      bottom:262px;
      right:5px;
      white-space:nowrap;
      cursor: pointer;
      border-radius: 3px 3px 3px 3px;
      opacity:0.7;
      filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
  }
</style>
<!====Found1s Scrolling Widget End====>

If you want to some changes in it then before clicking on "Add Widget", click on "Edit Content", then make changes there with the help of modification section below.

Modifications

Position: From Right to Left

• Search for "right:5px;" You will get two results.
• Change right with left. 
• Do this with both results.

Placement: Distance from bottom

• Search for "bottom:" You will get two results.
• Change the value with whatever you like. e.g. 220px
• Do this with both results.
• It would be nice if bottom button remains below the top button. 

If you still have questions, then let me know

      This is why people come here

Back/Scroll to top widget for blogger

Back/Scroll to bottom widget for blogger

Scroll to header

Scroll to footer

Widget generator

Easy install

One click installation

Add to Blogger