创建“滚动到顶部”按钮

Question

我想创建一个与Lenta.ru类似的按钮，并且平滑retractable effect，你可以帮助我吗？

Answer 1

检查此演示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);
        });
    });
});   

Answer 2

基于此How do I change my background on scroll using CSS?，以及一些适合您的愿望的effect 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;
});

---

当然你可以改变效果并使用jQuery动画而不是CSS3 ......但这取决于你的需要。

实例：http://jsfiddle.net/E2aWr/