jQuery Scroll Top and Bottom

Wednesday, September 18, 2013

Tulisan ini merupakan lanjutan dari artikel sebelunmnya yang membahas tentang animasi pada back to top yang diterapkan pada blogger, kali ini dilengkapi dengan tombol kembali ke bawah (back to down)

<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/AVvXsEiNS4ewXNkjmaKpDWuJTDVbkmPXsIFq4-dZ82bOmgx8kTDYLVPU-asXqOjtfnyu7ph4XBP1g08YwBscfrsD6kC70CqVDPumr8J8YJZxHOGUi6-EeysFKdSq1P7bxDYRn5K8yYGMM9S4Ay7j/s1600/back-to-top.png' title='Atas!' />
</a>
<a href='#footer' id='bottom'>
    <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzTTnhWQu2S5tmSTshfLsBp37KThP3Wdq7Q7S1urWR_c7KafmRjFk3rkZUA6pNe-trE9xtlbmTkEYAydmK_-zOjxOBKl8hrueNdY3hVlbG0OSYwjIva1w60BjSGSSDpeaIeXIvOnqFnnbD/s1600/back-to-down.png' title='Bawah!' />
</a>
<div id='footer' />

Live Demo

Pasang Iklan Anda di Sini

Pasang Iklan Anda di Sini