Menambahkan Tombol Go To Down Pada Tombol Back To Top

Menambahkan Tombol Go To Down Pada Tombol Back To Top

Bola Hero Gawai

Menambahkan Tombol Go To Down Pada Tombol Back To Top

Menambahkan Tombol Go To Down
Untuk menjawab pertanyaan dari sista Cindy Nailla, saya mencoba menambahkan sedikit kode lagi pada script back to top dari Kang Ismet yang menggunakan efek bounce untuk membuat tombol go to down.

Untuk tampilan tombolnya kita buat sama dengan sebelumnya yang menggunakan before dan after, hanya membalikan arah panahnya menjadi ke bawah (membalikan border pada before dan after).

Sebelumnya Anda harus membaca dulu postingan sebelumnya agar bisa nyambung dengan postingan ini, silahkan simak pada link berikut:


Setelah Anda memasang tombol Back To Top tersebut kini tinggal menambahkan tombol Go To Down. Silahkan tambahkan kode CSS untuk tombol go to down di bawah ini dan simpan di atas kode ]]></b:skin> atau </style>


#GoToDown {background:#fff;text-align:center;position:fixed;top:13px;right:10px;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 tambahkan kode di bawah ini pada javascript back to top dari Kang Ismet yang menggunakan efek bounce:


var $elem = $('body');
$('#GoToDown').click(function () {
$('html, body').animate({scrollTop: $elem.height()}, 4000);
$('#GoToDown').fadeOut()
});
$('#BounceToTop').click(function () {
$('#GoToDown').fadeIn()
});

Sehingga setelah ditambahkan akan menjadi seperti di bawah ini:


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

Tambahkan pemanggilnya dan simpan tepat di bawah pemanggil back to top (<div id='BounceToTop'/>) kode pemanggil ini berada tepat di bawah kode javascript.


<div id='GoToDown'/>

Biar lebih jelas, silahkan simpan kode javascript dan pemanggilnya di atas kode </body> seperti berikut:


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

Selesai... Selamat mencoba. Untuk live demonya silahkan coba tombol go to down dan back to top di blog ini.

Untuk tombol go to down ini saya belum berhasil menambahkan efek bounce seperti pada tombol back to top, nanti jika sudah bisa akan saya sharing lagi.

Referensi: http://blog.kangismet.net/2013/09/membuat-tombol-back-to-top-dengan-efek-bounce.html

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

44 Comments Add Comment

AKHIRNYA PERTAMAX!!! JUGA... hehehe :)


gan sekalian ane mau nanya bikin ads di samping itu gimana yah?

Balas

Coba di sini mas http://www.kompiajaib.com/2013/04/membuat-kotak-untuk-slot-iklan-dengan-link-pasang-iklan.html

Balas

bikin Terima kasih sudah berkomentar gimana gan? saya sudah pake di blog ini kok gak muncul" bingung jadinya :'(

Balas

ada yang baru dan mungkin kang adhy yang pertama menggunakan tombol go to down, tapi menurut saya gak usah dipasang gan, justru cuma bikin pengunjun malas membaca pengennya langsung kebawah dan langsung berkomentar seperti saya. :D

Balas

Makasih....mas :)

Balas

Betul kata mas Ikhsan, saya hanya berusaha menjawab pertanyaan pengunjung hehhehe :D
Jadi dilema juga yah hehehhe :)

Balas

gan kompi bisa bantu saya gak valid css3 ,errornya tinggal 1 gak tau darimana? tiba-tiba ada scrip ane muncul : http://unduhdroid.blogspot.com/
di tunggu jawabannya gan :D

Balas

Dengan rasa hormat, mohon untuk menggunakan halaman out of topic mas :)

Balas

mohon maaf mas ,salah kamar,kalau bisa dibantu yah :(

Balas

Memang jadi dilema kang... hehehehehe
tapi disimpan saja dulu buat koleksi
makasih sharenya kang.... :) |o|

Balas

ide baru nih rupanya ya mas, coz biasanya hanya ada tombol back to top, hehehe :D
makasih sharingnya ntar saya coba utk mempercantik blog saya satunya :)

Balas

atas bawah, hm.. keren mas :-bd

Balas

ijin kopi mas...! (pisang gorengnya saya kirim lewat email)

Balas

Bagus Kang Tombol goto down nya bisa untuk tombol download
Di juga yah Kang, coba di blog saya nih, terima kasih Kang Adhy :)

Balas

Kalau tika masih mikir buat pasang itu di blog, lagi alergi html buat sementara waktu hehehe.. Tapi keren yah, bisa buat tombol itu.. Salut :)

Balas

Kerren mas, sekarang udah sepasang kayak suami istro. wkwk

Balas

Bisa maen sosorodotan aya nu kieuan mah Kang, keren tombol Go To Down na |o|

Balas

Menambahkan go to down pada script back to top kang Ismet memang baru ini mbak, tapi sebenarnya tombol go to down udah lama namun kodenya berbeda-beda.

Balas

Atas bawah OK sis hehehhehe :D

Balas

Wah mas Andre pisangnya ga dibungkis kirimnya, jadi tinggal sepotong nih :ng

Balas

Hehehe iya kang, di internet biasanya panah ke bawah merupakan icon download hehehe :)

Balas

Heheehe iya sis harus dipikirkan bener manfaatnya jika akan menambahkan sesuatu di blog :-d

Balas

Wkwkwkw semoga bahagia :ng

Balas

Tah eta kang, jadi anteng sosorodotan yeuh wkwkwkw :ng

Balas

Makasih mas :)

Balas

Mantap kang back tu top nya ada towew'an :D

Balas

akhirnya muncul tutorial ini disini...
bagus bagus bagus.... |o| :-bd

Balas

Wah jadi ga enak nih kang :3

Balas

memang keren kang, tapi malah asa hareurin menurut saya mah wkwkwk

Balas

biar enak yah mas scrool kebawahnya :D

Balas
This comment has been removed by the author.

Itu dari kang Ismet mas :)

Balas

Makasih bung :)

Balas

Hehehee nggak apa2 kok sis :)

Balas

Asa pasesedek di angkot nya kang hehehe :)

Balas

Ini mantap nih, saya ijin pakai ya kang.. :) bagus banget..

Balas

ijin repost kang kang adhy di blog saya...
kalo di ijinin
makasih kang

Balas

Klo cewe yg nanya di jawab yaaa :p

Balas

apakah tombol back to down dan bact to top ini valid html 5?
http://masrud.blogspot.com/

Balas

Cakep banget. Back To Top dengan effect "bounce", berkolaborasi dengan Go To down. Keren abis pokokna mah, Mas Adhy dan Kang Ismet. Mantap pisan.

Sudah saya update tombol-tombol ini di blog baru saya Mas Adhy,
Terima kasih atas tombol-tombol cantiknya.

Balas
Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×