Ketika sebuah halaman web memiliki artikel atau konten yang sangat panjang untuk dibaca, untuk mempermudah pembaca kembali ke posisi paling atas atau ke bawah, kita sebaiknya menggunakan "Animated Scroll to Top" dan "Animated Scroll to Bottom". Berikut yang saya dapat contohkan:
//ASSET IMAGES
//CSS
/*scrollToTop*/
.scrollToTop{
text-align:center;
background: transparent;
font-weight: bold;
color: #444;
text-decoration: none;
position: fixed;
top: 50%;
margin-top: -40px;
right: 0px;
display: none;
opacity: .7;
float: right;
}
.scrollToTop img {width: 50%}
.scrollToTop:hover{
text-decoration:none;
}
.scrollToBottom{
text-align:center;
background: transparent;
font-weight: bold;
color: #444;
text-decoration: none;
position: fixed;
top: 50%;
margin-top: 40px;
right: 0px;
display: none;
opacity: .7;
float: right;
}
.scrollToBottom img {width: 50%}
.scrollToBottom:hover{
text-decoration:none;
}
/*scrollToBottom*/
//VIEW
<a href="#" class="scrollToTop"><img src="<?php echo base_url('assets/images/top.png'); ?>"></a>
<a href="#" class="scrollToBottom"><img src="<?php echo base_url('assets/images/bottom.png'); ?>"></a>
<footer>
<span>© 2016 <a href="http://phpaku.blogspot.co.id">PHP Aku</a></span>
</footer>
//JQUERY & JAVASCRIPT
<script src="jquery.js"></script>
<script type="text/javascript">
$(function () {
var scrollHeight = $(document).height() - $(window).height() - $(window).scrollTop();
//var scrollBottom = $(window).scrollBottom();
$(window).scroll(function () {
if ($(this).scrollTop() > 300) {
$('.scrollToTop').fadeIn();
} else {
$('.scrollToTop').fadeOut();
}
if ($(this).scrollBottom() === scrollHeight) {
$('.scrollToBottom').fadeOut();
} else {
$('.scrollToBottom').fadeIn();
}
});
$('.scrollToTop').click(function () {
$('html, body').animate({scrollTop: 0}, 800);
return false;
});
$('.scrollToBottom').click(function () {
$('html, body').animate({scrollTop: $('footer').offset().top}, 'fast');
return false;
});
});
</script>
Sekian, terimakasih atas kunjungannya.
Salam,
PHP Aku : Membangun web terorganisasi dan mudah dimengerti, contoh tutorial dengan menggunakan HTML, CSS, JavaScript, SQL, PHP, dan XML.
EmoticonEmoticon