creating a Scroll To Top button

Question

I want to create a similar button as in Lenta.ru, with a smooth retractable effect, can you help me with that?

possible duplicate of [How do I scroll to the top of the page with jQuery?](http://stackoverflow.com/questions/1144805/how-do-i-scroll-to-the-top-of-the-page-with-jquery) — Sergio, Jul 14 '13 at 21:06

score 13 · Answer 1 · answered Jul 15 '13 at 04:43

Check this DEMO http://jsfiddle.net/yeyene/J3zyq/3/

$(document).ready(function() {
    $(window).scroll(function() {
        if($(this).scrollTop() > 100){
            $('#goTop').stop().animate({
                top: '20px'    
                }, 500);
        }
        else{
            $('#goTop').stop().animate({
               top: '-100px'    
            }, 500);
        }
    });
    $('#goTop').click(function() {
        $('html, body').stop().animate({
           scrollTop: 0
        }, 500, function() {
           $('#goTop').stop().animate({
               top: '-100px'    
           }, 500);
        });
    });
});

score 0 · Answer 2 · edited May 23 '17 at 12:09

Based on this How do I change my background on scroll using CSS?, and a few changes to fit your desire effect with a little CSS3 & jQ

HTML

<div id="up"></div>

CSS

#up {
    background: url(http://icdn.lenta.ru/assets/icons-s238578731b-c5df9ffc01b66d2cee1e3e3d6d74e49b.png) no-repeat;
    background-position: -2329px 0;
    display: inline-block;
    vertical-align: middle;
    position: fixed;
    right: 100px;
    top: -64px;
    width: 54px;
    height: 54px;
    cursor: pointer;
    opacity: 0;
    -webkit-transition: all 0.5s ease-in-out;
        -moz-transition: all 0.5s ease-in-out;
        -ms-transition: all 0.5s ease-in-out;
        -o-transition: all 0.5s ease-in-out;
        transition: all 0.5s ease-in-out;
}
#up.scrolled{
    opacity:1;
    top: 10px;
}

JS

jQuery(window).scroll(function(){
    var fromTopPx = 200; // distance to trigger
    var scrolledFromtop = jQuery(window).scrollTop();
    if(scrolledFromtop > fromTopPx){
        jQuery('#up').addClass('scrolled');
    }else{
        jQuery('#up').removeClass('scrolled');
    }
});
jQuery('#up').on('click',function(){
    jQuery("html, body").animate({ scrollTop: 0 }, 600);
    return false;
});

Of course you can change the effect and use jQuery animation instead of CSS3... but it will depends on your needs.

creating a Scroll To Top button

2 Answers2

HTML

CSS

JS

Live example: http://jsfiddle.net/E2aWr/