Back to Top 'Scroll Page' With jQuery and CSS3

Kembali lagi dengan tutorial jQuery, yaitu 'Back to Top 'Scroll Page' With jQuery and CSS3', tutorial kita kali ini berbeda dari biasanya membuat back to top jQuery, karena disini saya sudah menambahkan efek css3 jg loh, jadi utta nama kan tutorial ini, 'with jQuery and CSS3', selain dengan efek scrolling dari jquery ditambah jg dengan efek hover color with css3 ini,..

Screenshot & Demo  'Back to Top 'Scroll Page' With jQuery and CSS3'.




Oia sebelum kita kepembuatan 'Back to Top 'Scroll Page' With jQuery and CSS3' ini, sobat juga bisa lihat tutorial saya yang sebelumnya yaitu 'Back to Top 'Smooth Page Scroll' jQuery', sobat bisa lihat2 disana, siapa tau tertarik.hehee,..

Baiklah Jika sobat tertarik mencobanya silahkan ikuti langkah berikut :

/* UTbacktotop */
#UTbLogjQtop{bottom:15px;right:10px;cursor:pointer;float:right;position:fixed;transition:0.6s linear;-o-transition:0.6s linear;-moz-transition:0.6s linear;-webkit-transition:0.6s linear;-ms-transition:0.6s linear;width:37px;height:40px;opacity:0.4;
background:transparent url(http://picturestack.com/237/413/j0Jprev1prn.png) center no-repeat;background-size:35px 38px;filter:alpha(opacity=40);border:3px double transparent;padding:5px;border:3px double blue;border-radius:50%;box-shadow:1px 1px 10px #000;-moz-box-shadow:1px 1px 10px #000;-webkit-box-shadow:1px 1px 10px #000;}
#UTbLogjQtop:hover{opacity:1.0;filter:alpha(opacity=100);background:#111 url(http://picturestack.com/237/413/j0Jprev1prn.png) center no-repeat;background-size:35px 38px;border:3px double #ddd;box-shadow:1px 1px 15px blue;-moz-box-shadow:1px 1px 15px blue;-webkit-box-shadow:1px 1px 15px blue;}

4. Selanjutnya Masukkan kode HTML berikut diatas </body>

<div style="display:none;" title="Back to Top Page" class="UTbLogjQtop" id="UTbLogjQtop"></div>
<!-- UTbLogjQtop -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script text="text/javascript">
$(function() {
var $elem = $('#outer-wrapper');
$('#UTbLogjQtop').fadeIn('slow');
$('#UTbLogjQtop').click(
function (e) {$('html, body').animate({scrollTop: '0px'}, 800);});
});
</script>
<!-- End UTbLogjQtop -->

5. Simpan template. Dan berhasil.

Keterangan:
- Script jquery (yang berwarna biru muda) jika sudah memasang ditemplate sobat, maka kode diatas tidak perlu dipasang lagi (biar tidak double).


Please rate this article: