Berikut cara membuat tombol back to top pada website, sanggup di aplikasikan pada web blogger atau website yang tersusun dari CSS dan HTML.
ketika kita mengklik tombol back to top ini, halaman web akan terscrool ke atas, setelahnya akan ada efek bounce.
Kode CSS nya:
#Back-to-top {
text-align: center;
z-index: 9999;
position: center;
bottom: 70px;
cursor: pointer;
display: none;
opacity: 0.7;
}
#Back-to-top:hover {
opacity: 1;
}
Pasang script ini di dalam sehabis </style>
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js'/></script>
Letakkan aba-aba html ini di body
<div id='Back-to-top'>
<img alt='Scroll to top' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgb0aHhyphenhyphenWGq9qX3irU5CUSQNd-L_knxACWi1sisyM7Yqg8z2bUkoQVjMKmOR_xk17ohhsQ19XT06UuTD_NqQ9YnusM03iWCReYZEADVZJvbZpRXoB_-Ew8o5fK3FV11fYycgCbLOVJU0RKC/s128/backtotop.png'/>
</div>
<script type='text/javascript'>
$(function() { $(window).scroll(function() {
if($(this).scrollTop()>400) {
$('#Back-to-top').fadeIn();
}
else { $('#Back-to-top').fadeOut();}
});
$('#Back-to-top').click(function() {
$('body,html')
.animate({scrollTop:0},300)
.animate({scrollTop:40},200)
.animate({scrollTop:0},130)
.animate({scrollTop:15},100)
.animate({scrollTop:0},70);
});
});
</script>
Sumber http://www.tips-trick.com
ketika kita mengklik tombol back to top ini, halaman web akan terscrool ke atas, setelahnya akan ada efek bounce.
Kode CSS nya:
#Back-to-top {
text-align: center;
z-index: 9999;
position: center;
bottom: 70px;
cursor: pointer;
display: none;
opacity: 0.7;
}
#Back-to-top:hover {
opacity: 1;
}
Pasang script ini di dalam sehabis </style>
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js'/></script>
Letakkan aba-aba html ini di body
<div id='Back-to-top'>
<img alt='Scroll to top' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgb0aHhyphenhyphenWGq9qX3irU5CUSQNd-L_knxACWi1sisyM7Yqg8z2bUkoQVjMKmOR_xk17ohhsQ19XT06UuTD_NqQ9YnusM03iWCReYZEADVZJvbZpRXoB_-Ew8o5fK3FV11fYycgCbLOVJU0RKC/s128/backtotop.png'/>
</div>
<script type='text/javascript'>
$(function() { $(window).scroll(function() {
if($(this).scrollTop()>400) {
$('#Back-to-top').fadeIn();
}
else { $('#Back-to-top').fadeOut();}
});
$('#Back-to-top').click(function() {
$('body,html')
.animate({scrollTop:0},300)
.animate({scrollTop:40},200)
.animate({scrollTop:0},130)
.animate({scrollTop:15},100)
.animate({scrollTop:0},70);
});
});
</script>
Komentar
Posting Komentar