Cara Membuat Tombol Back To Top Dengan Efek Memantul
Lanjut kepada tutorial... Apa sebenarnya efek bounce itu? bounce artinya memantul, jadi back to top setelah discroll akan ada sedikit efek pantulan, . Untuk menerapkannya, silahkan ikuti langkah mudahnya :
Langkah 1 : Simpan kode jQuery di atas
</head>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'/>
lewati langkah ini apabila di blog
sobat sudah ada. Versi bisa berbeda-beda seperti 1.3.2, 1.6.4, 1.7.1, dll.
Langkah
2 :
Simpan kode ini masih di atas </head>-Muncul Perlahan
<script type='text/javascript'>
$(function() { $(window).scroll(function() { if($(this).scrollTop()>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); }); });
</script>
$(function() { $(window).scroll(function() { if($(this).scrollTop()>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); }); });
</script>
Atau- Muncul Dari Bawah
<script type='text/javascript'>
$(function() { $(window).scroll(function() { if($(this).scrollTop()>100) { $('#BounceToTop').slideDown(200); } else { $('#BounceToTop').slideUp(300); } });
$('#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); }); });
</script>
$(function() { $(window).scroll(function() { if($(this).scrollTop()>100) { $('#BounceToTop').slideDown(200); } else { $('#BounceToTop').slideUp(300); } });
$('#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); }); });
</script>
Buat widget baru HTML/JavaScript di tata letak, simpan kode ini:
<style type= 'text/css' scoped='scoped'>
#Bounce To Top{position:fixed; bottom:0px; right:3px; cursor: pointer; display:none}
</style>
<div id='BounceToTop'><img alt='Back to top' scr='Url Gambar Back To Top Kalian'/></div>
#Bounce To Top{position:fixed; bottom:0px; right:3px; cursor: pointer; display:none}
</style>
<div id='BounceToTop'><img alt='Back to top' scr='Url Gambar Back To Top Kalian'/></div>
Atau, jika kalian ingin membuat Back To Top tanpa efek apapun, berikut kodenya:
Kode yang ini cukup simpel, cukup tambah widget HTML/JavaScript di tata letak and finish..
<a title="Back to Top" href="#" style="position: fixed; bottom: 5px; right: 5px;"><img src="Url Gambar Back To Top Kalian"></a>
Untuk Url gambar Back To Top
kalian dapat memilih salah satu dari gambar berikut atau membuat sendiri gambar
versi kalian...
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJFw1ajgTgkuxhsyAiXnPZSbO668_jGmRKnFjDq0Bb3uEhSALrdXjkOBoriMENGWwfDghA6bD1Hut7H2hfqJqZZjCNVDgUa4GrXsQiTcAPjSEcPu_9YSkDg-4Pm1gQPenleE-w78vsESo/s1600/7.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglK0vZwdBUPmPRHfzH8_PKhHseAusz0MFAftlk-E5KRxCDZCw-rElh83mRRdHbnx8YTI6SkZ3wNWhNExDqS48ncM65Xm6UowvybEQZdWOG0YcK9EoMgV52RzzYph1hA_8K8RJwbUZeqwI/s1600/1.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEfw_NPaeDWsnDDDySgm2hRfHomFL1u5TEneSqUlqZVo0w2Sr_f9kAbHPEXLFA1J2VkTxAVuWAmoQD-48UOJKw-WIATwP4g6BzDZu08BQn3QjQTCsCrtg3p988qy5dptOl8WQEGlFAkZk/s1600/4.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuMQmd5-tD-lAA8TXLfA8083_PAJFWJ5-kCcA8GyxbUDHQdzUuSmehH2RbElMLddH2qorccTipMR0iwMgDPanNrPFo24leGzpJjb08ai-gdwwrzTuapp7kdbomts6SlhqvxyxyKBuKiiA/s1600/17.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMBxvAYmIh1PHmHdBJyLXFD9Mf2IPKi6WjblX5k38UaFP6VKw7xt32ekqEtNthyphenhyphen-q_9wm0UVGhuWRw5lMTM3l3yPLD0hxMoC-FZ-LqRZNCF1Q1-GpMxjCAJTgSJWKM5IIspo01T-Gpl9A/s1600/11.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2qvtkSFqVzJscQgYbZQ33lPxsC9CfBwK3ar7ykB1dxbGFUV1RlSQqeJfXtTt4rGmDraKu2q3Y7dDWx8CWAdFv-sfjInvms9k1-zfYl4eMq_pX_2B_55eAxUzWYAA3dwNy_zOLG6pUCBA/s1600/18.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAPi4KNNJxUGpqJIof7HWe8DDyNdEjxf4c2aXUt6EmxTmuJcV0a31Y53CHxwYXYTo2cIzyxHgVgnwJZgHusNUAClrmREbTa45NCtsD9QGwywkQQZa9wo-5WY7ENARSjpekW6JvFUYpNdI/s1600/5.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5nWZDJB18k3aUvrwZPavaJKrkwBdHiHIhl9u3bX92hU58kultmQxluP_AgyEuDHfUz-2SmYvWJfujKpH9G-4mt5p2xBMTS6f06xSxAFzxXs3sfzCJw4InhdBR33BQ5LW41X7lMUvtpNo/s1600/16.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtOwie42KdI2k7Y-74qlflHWUWNwGrMSWBa0WTNV5-QygJSPv1EPUC9NDHDtZfy5V4nyr6sy2c6FZCEozoMyKQS-s_tRD_m20SO_dLaLxddU2w8QG2Ja5cniq3rNa5GupaXHeh5jb1e64/s1600/Fly2013HK_zpsdef61aef.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcqosZI08IPthdPDLbFFSli7WGRGLp2cf0W42FgVzl_A3f-jjlYdKTxhs0QfI9WGlMYmv4foJmEksJJ4jsmzibTXsAUOz9PAZUT2ZeLNUzqxcz8MBglMCg61VaL5tGRiFSByHk0rXoI4Q/s1600/9.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnTG1c65wG9A9qtMib7n7cNzZqvsBpSRVXhuNm4y5oa-5azgfwN9FvOc9X9RGHem9g88ZMva-SoNM6evNwjjv_4fZbkeBnhQRC_tZIR5_xau9B_YK1vMv9rFcyFJsehlbvdT8PP7E_NYg/s1600/8.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWR098xyQcrMjA3GYXKtCOBz_vdznQABqs5X9h3mgi7oksIIE6IavxBNg2rOkPM-KuMNNahgFOQp5RHQLY09nv_H5X6nfP-0ci7zYFeuXJmV8uYCUIh2lBqN4-wL9yOnBT1arLpkNuT1c/s1600/13.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg31BF2R1biCFex9NIyD6HE_BxhCsF-pK-KYw5JopdjGd4vYy5iG-7NCDkFI9frYKvH6MNb1upXNbUCMBbqQzr7dMA7knPgciak2jArUvTnNKmUWRXghC94FtX-2oLGQa0aJefVgifn8Uk/s1600/6.png
Sekian Postingan dari saya, semoga
bermanfaat. Terima Kasih juga karena telah berkunjung di blog saya...
>>
>> >> Good Luck << << <<
Comments