Setelah beberapa hari yang lalu saya pernah membahas postingan yang juga ada kaitannya dengan postingan yang akan saya bahas pada pagi hari ini yaitu Scroll To Top Animation namun sedikit ada perbedaan pada posting yang lalu, dimana postingan yang lalu pungsinya hanya untuk menscroll halaman keatas saja, sedangkan post kali ini sudah di lengkapi dengan pungsi menscroll halaman kebawah (ScrollBottom)

Baik langsung saja. Untuk membuatnya, pertama-tama masuklah ke menu Template kemudian klik Edit HTML

Temukan kode ini:

</body>

Salin kode di bawah ini dan letakkan di atasnya:

<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/AVvXsEjE1DfgeWcrBp9ZfYEK4CJLi6KoP_jlmy6RVk1AE6_vP84tm29mi75_MkDffIXbJPqlX6tlKFJd9ct9E079I41r8WAoscuJjeeVO6gxXGsnKf2QaHMG-WoJ58o_gsxRppNuol5jVzqEGqp7/h120/dhfscrolltop.png' title='Atas!' />
</a>
<a href='#footer' id='bottom'>
    <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiochAYE7DakuXIam_gQPuIeTTJ0i-wKaEm_AogFg3MnfpuAzVkjZaOuTEoh_0-qEsNEr0-I3cpkjSxHwZxTPN7Panc7vk9eeOMw4zldIPBKiPVUa7y2FtLcJTpddcjCVMEI05hXfvFdGCw/s1600/dhfscroll.png' title='Bawah!' />
</a>
<div id='footer' />