创建一个滚动到顶部按钮[关闭]答案

【问题标题】：creating a Scroll To Top button [closed]创建一个滚动到顶部按钮[关闭]
【发布时间】：2023-04-02 08:17:01
【问题描述】：

我想创建一个与Lenta.ru 类似的按钮，具有平滑的retractable effect，你能帮我吗？

【问题讨论】：

How do I scroll to the top of the page with jQuery?的可能重复

【解决方案1】：

查看这个 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);
        });
    });
});

【讨论】：

【解决方案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/

【讨论】：