go,to,bottom,back,to,top,javascript

Kubilay 7/27/2016 0

these codes will let you scroll bottom or top of the page

Html
<a href="#" class ="back-to-top">Back to Top</ a>
<a href="#" class ="back-to-bottom">Back to Bottom</ a>
 
JavaScript
 $(window).scroll(function () {
        if ($(window).scrollTop() > amountScrolled) {
            $( 'a.back-to-top').fadeIn('fast' );
        } else {
            $( 'a.back-to-top').fadeOut('fast' );
        }
    });

    $('a.back-to-top').click( function () {
        $( 'html, body').animate({ scrollTop: 0 }, 'fast' );
        return false;
    });

    $('a.back-to-bottom').click( function () {
        window.scrollTo(0, document.body.scrollHeight);
        return false;
    });
 
CSS
 a.back-to-top {
        display: none;
        width: 60px;
        height: 60px;
        text-indent: -9999px ;
        position: fixed;
        z-index: 999;
        right: 20px;
        bottom: 90px;
        background: #27AE61 url("/images/post/up.png") no-repeat center 43% ;
        -webkit-border-radius: 30px ;
        -moz-border-radius: 30px ;
        border-radius: 30px ;
}

a.back-to-bottom {
        display: block;
        width: 60px;
        height: 60px;
        text-indent: -9999px ;
        position: fixed;
        z-index: 999;
        right: 20px;
        bottom: 20px;
        background: #27AE61 url("/images/post/down.png") no-repeat center 43% ;
        -webkit-border-radius: 30px ;
        -moz-border-radius: 30px ;
        border-radius: 30px ;
}

 

Report Bug

Please Login to Report Bug

Reported Bugs

Comments

Please Login to Comment

Comments