Cara membuat Scroll To Top and Down

Hallo Sobat Wahid Emalution , Pada pagi hari ini saya akan membagikan tutorial Cara membuat Scroll To Top dan Down .

mungkin banyak sobat yang sudah tau ,tapi tak ada salahnya untuk berbagi.

Banyak sekali di blog yang terkenal menggunakan Scroll To Top dan Down , dikarenakan Dalam satu Posting Bisa Mencapai Ratusan Komentar.

Jadi untuk mempersingkat waktu untuk ke bagian paling bawah maupun paling atas , jadi pembuat blog memutuskan membuat Scroll to top dan Down.

Langsung saja kita kecaranya saja.

Letakkan Kode  ini di atas ]]></b:skin> atau </style>

/*scroll top and down*/
#GoToDown {background:#fff;text-align:center;position:fixed;bottom:10px;right:10px;z-index:999;cursor:pointer;width:30px;height:20px;padding:5px;border-radius:2px;}
#GoToDown:before {content:"";position:absolute; bottom:5px;right:5px; width:0;height:0;border-style:solid;border-width:20px 15px 0 15px;border-color:#555 transparent transparent transparent;line-height:0;transition:all 0.3s ease-out;}
#GoToDown:hover:before {content:"";position:absolute; bottom:5px; right:5px;width:0;height:0;border-style:solid;border-width:20px 15px 0 15px;border-color:#555 transparent transparent transparent;line-height:0}
#GoToDown:after {content:"";position:absolute;top:5px;right:11px;width:0; height:0;border-style:solid;border-width:12px 9px 0 9px;border-color:#fff transparent transparent transparent;line-height:0;}


#BounceToTop {background:#fff;text-align:center;position:fixed;bottom:10px;right:10px;cursor:pointer;width:30px;height:20px;padding:5px;display:none;border-radius:2px;}
#BounceToTop:before {content:"";position:absolute;bottom:5px;right:5px;width:0; height:0;border-style:solid;border-width:0 15px 20px 15px;border-color:transparent transparent #555 transparent;line-height:0;transition:all 0.3s ease-out;}
#BounceToTop:hover:before {content:"";position:absolute;bottom:5px;right:5px; width:0;height:0;border-style:solid;border-width:0 15px 20px 15px;border-color:transparent transparent #555 transparent;line-height:0}
#BounceToTop:after {content:""; position:absolute;bottom:5px;right:11px;width:0; height:0;border-style:solid;border-width:0 9px 12px 9px;border-color:transparent transparent #fff transparent;line-height:0;}

Setelah itu Letakan Kode Dibawah Tepat Diatas </body>

<script type='text/javascript'>
$(function() { $(window).scroll(function() { if($(this).scrollTop()&gt;100) { $(&#39;#BounceToTop&#39;).fadeIn(); } else { $(&#39;#BounceToTop&#39;).fadeOut(); } });
$(&#39;#BounceToTop&#39;).click(function() { $(&#39;body,html&#39;).animate({scrollTop:0},800) .animate({scrollTop:0},200); });
var $elem = $(&#39;body&#39;);
$(&#39;#GoToDown&#39;).click(function () {
$(&#39;html, body&#39;).animate({scrollTop: $elem.height()}, 800);
$(&#39;#GoToDown&#39;).fadeOut()
});
$(&#39;#BounceToTop&#39;).click(function () {
$(&#39;#GoToDown&#39;).fadeIn()
});
 });
</script>
<div id='BounceToTop'/>
<div id='GoToDown'/>

Yap Cukup Segitu saja Semoga Tutorial ini dapat Membantu sobat .
Terima kasih