Cara Membuat Button Back to Top dan Back to Down

Cara Membuat Button Back to Top sebenarnya sudah saya bahas dua kali pada artikel sebelumnya yaitu Cara Memasang Buttom Back to Top pada Blog dan Cara Membuat Autoscroll Back to Top dengan Jquery, tetapi artikel ini sedikit berbeda dengan artikel sebelumnya karena dilengkapi juga dengan button Back to Down.

Jadi, dengan membuat button Back to Top dan Back to Down ini pengunjung akan dimudahkan tidak hanya untuk kembali ke halaman bagian atas, tetapi juga untuk langsung menuju ke halaman bagian bawah. Dengan demikian pengunjung akan lebih mudah melakukan eksplore seluruh bagian pada halaman postingan yang kita buat. Memasang button back to top dan back to down ini sangat berguna untuk Sobat yang suka membuat artikel yang sangat panjang, demikian juga untuk blog yang memiliki banyak komentar dari pengunjung yang menyebabkan halaman postingan hingga jauh ke bawah, hal ini akan sangat bermanfaat.

Jika tertarik untuk memasang button Back to Top ini di blog yang Sobat kelola, ikuti langkahnya berikut ini. 

Cara Membuat Button Back to Top dan Back to Down 

Copy dan letakkan CSS berikut di atas </style>

#BounceToTop {background:#888;text-align:center;position:fixed;bottom:10px;right:50%;cursor:pointer;width:30px;height:20px;padding:5px;display:none;border-radius: 2px;}

#BounceToTop:before {content:&quot;&quot;; position:absolute; bottom:5px; right:5px; width:0; height:0; border-style:solid; border-width:0 15px 20px 15px; border-color:transparent transparent #fff transparent; line-height:0;}

#BounceToTop:hover:before {content:&quot;&quot;; position:absolute; bottom:5px; right:5px; width:0; height:0; border-style:solid; border-width:0 15px 20px 15px; border-color:transparent transparent #333 transparent; line-height:0 }

#BounceToTop:after {content:&quot;&quot;; position:absolute; bottom:5px; right:11px; width:0; height:0; border-style:solid; border-width:0 9px 12px 9px; border-color:transparent transparent #888 transparent; line-height:0;}

#GoToDown {background:#fff;text-align:center;position:fixed;bottom:45px;right:50%;z-index:999;cursor:pointer;width:30px;height:20px;padding:5px;border-radius: 2px;}

#GoToDown:before {content:&quot;&quot;; position:absolute; bottom:5px; right:5px; width:0; height:0; border-style:solid; border-width:20px 15px 0 15px; border-color:#333 transparent transparent transparent; line-height:0;}

#GoToDown:hover:before {content:&quot;&quot;; position:absolute; bottom:5px; right:5px; width:0; height:0; border-style:solid; border-width:20px 15px 0 15px; border-color:#888 transparent transparent transparent; line-height:0 }

#GoToDown:after {content:&quot;&quot;; 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;}

Kemudian letakkan JavaScript berikut di atas </body>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<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:25},200) .animate({scrollTop:0},150) .animate({scrollTop:10},100) .animate({scrollTop:0},50); }); var $elem = $(&#39;body&#39;);

$(&#39;#GoToDown&#39;).click(function () {

$(&#39;html, body&#39;).animate({scrollTop: $elem.height()}, 4000);

$(&#39;#GoToDown&#39;).fadeOut()

});

$(&#39;#BounceToTop&#39;).click(function () {

$(&#39;#GoToDown&#39;).fadeIn()

});

 });

</script>

  <div id='BounceToTop'/>

  <div id='GoToDown'/>

<script type='text/javascript'>

$(document).ready(function(){

var olderLink = $(&quot;a.blog-pager-older-link&quot;).attr(&quot;href&quot;);

$(&quot;a.blog-pager-older-link&quot;).load(olderLink+&quot; .post-title:first&quot;, function() {

var olderLinkTitle = $(&quot;a.blog-pager-older-link&quot;).text();

$(&quot;a.blog-pager-older-link&quot;).text(olderLinkTitle);//rgt

});

var newerLink = $(&quot;a.blog-pager-newer-link&quot;).attr(&quot;href&quot;);

$(&quot;a.blog-pager-newer-link&quot;).load(newerLink+&quot; .post-title:first&quot;, function() {

var newerLinkTitle = $(&quot;a.blog-pager-newer-link:first&quot;).text();

$(&quot;a.blog-pager-newer-link&quot;).text(newerLinkTitle);

});

});

</script>

</b:if>

Demikianlah Cara Membuat Button Back to Top dan Back to Down ini, semoga bermanfaat dan dapat berguna untuk Sobat semua. Happy blogging!