Tips Dan Trik Belajar SEO Blog kali ini mau membahas mengenai
back to top dan back to bottom atau bisa disebut juga kembali ke atas dan ke bawah, sebenarnya saya sudah pernah menulis artikel ini tentang
Back To Top dengan Efek Bounce, tapi itu hanya back to top saja tanpa back to down atau apalah kalian menyebutnya. langsung saja berikut langkah-lagkahnya
Cara Membuat Back To Top dan Back To Bottom
#top {
display:block;
cursor:pointer;
position:fixed !important;
position:absolute;
bottom:-50px;
right:10px;
z-index:999;
}
#bottom {
display:block;
cursor:pointer;
position:fixed !important;
position:absolute;
top:50px;
right:10px;
z-index:999;
}
#top:focus, #bottom:focus {
outline:none;
}
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$("#top").stop().animate({
bottom: "50",
right: "10"
}, {
duration: 1000,
queue: false
})
} else {
$("#top").stop().animate({
bottom: "-50",
right: "10"
}, {
duration: 1000,
queue: false
})
};
if ($(this).scrollTop() > 100) {
$("#bottom").stop().animate({
top: "-50",
right: "10"
}, {
duration: 1000,
queue: false
})
} else {
$("#bottom").stop().animate({
top: "50",
right: "10"
}, {
duration: 1000,
queue: false
})
}
});
$("#top").removeAttr('href').on("click", function () {
$("html, body").animate({
scrollTop: 0
}, "slow");
return false
});
$("#bottom").removeAttr('href').on("click", function () {
$("html, body").animate({
scrollTop: $('#footer').offset().top
}, 970);
return false
})
});
<a href='#top' id='top'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgD7lGDHeyUuYGdeC3Y8K1cyqGvy9QceAeXqpJZubnDF219R8G7Vfh0pVeFigIE343U_RcY5DCYmPcWPIn2fooeAgQkF5_Sw8oCnUiI7YNbLXcuG8JDYYKjNP9hdKR_AghV4a1HaNcMUr8/s1600/back-top.png.png' title='Atas!'/> </a> <a href='#footer' id='bottom'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9GwAh0GBkjfBYfOfOEsQv1E361s3AiWLwV0jrkTLhzjASQ-lI36etTHVb2hsgrzkKceOQNaM9yZzp3A_G3_vcGwwVO4dkUVW9b89UANSSnLn2n8LJSThRRMPRFVnmirrkfxc9rqkw2IQ/s1600/back-to-down.png' title='Bawah!'/> </a>
<div id='footer'/>
Cara Pemasangannya sangat mudah CSS, JavaScript dan Kerangkanya tinggal kita gabung saja.
1. Login ke blogger
2. Ke Template => Edit HTML
3. Temukan Kode
</body>
gunakan CTRL+F 4. Masukkan kode berikut tepat di atas
</body>
<style type='text/css'>
#top {
display:block;
cursor:pointer;
position:fixed !important;
position:absolute;
bottom:-50px;
right:10px;
z-index:999;
}
#bottom {
display:block;
cursor:pointer;
position:fixed !important;
position:absolute;
top:50px;
right:10px;
z-index:999;
}
#top:focus, #bottom:focus {
outline:none;
}
</style>
<script type='text/javascript'>
//<![CDATA[
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$("#top").stop().animate({
bottom: "50",
right: "10"
}, {
duration: 1000,
queue: false
})
} else {
$("#top").stop().animate({
bottom: "-50",
right: "10"
}, {
duration: 1000,
queue: false
})
};
if ($(this).scrollTop() > 100) {
$("#bottom").stop().animate({
top: "-50",
right: "10"
}, {
duration: 1000,
queue: false
})
} else {
$("#bottom").stop().animate({
top: "50",
right: "10"
}, {
duration: 1000,
queue: false
})
}
});
$("#top").removeAttr('href').on("click", function () {
$("html, body").animate({
scrollTop: 0
}, "slow");
return false
});
$("#bottom").removeAttr('href').on("click", function () {
$("html, body").animate({
scrollTop: $('#footer').offset().top
}, 970);
return false
})
});
//]]>
</script>
<a href='#top' id='top'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgD7lGDHeyUuYGdeC3Y8K1cyqGvy9QceAeXqpJZubnDF219R8G7Vfh0pVeFigIE343U_RcY5DCYmPcWPIn2fooeAgQkF5_Sw8oCnUiI7YNbLXcuG8JDYYKjNP9hdKR_AghV4a1HaNcMUr8/s1600/back-top.png.png' title='Atas!'/>
</a>
<a href='#footer' id='bottom'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9GwAh0GBkjfBYfOfOEsQv1E361s3AiWLwV0jrkTLhzjASQ-lI36etTHVb2hsgrzkKceOQNaM9yZzp3A_G3_vcGwwVO4dkUVW9b89UANSSnLn2n8LJSThRRMPRFVnmirrkfxc9rqkw2IQ/s1600/back-to-down.png' title='Bawah!'/>
</a>
<div id='footer'/>
Terakhir: Simpan template dan lihat saja hasilnya. Semoga bermanfaat.
Dimohon kerjasamanya untuk tidak menyertakan link aktif dalam komentar. Lihat penjelasan mengenai tata cara berkomentar Disini