Question

我有一个粘贴标题，滚动一定数量后会出现一个“按钮”。我希望该按钮在用户点击时将标题移回顶部，但我希望页面保持在它所处的位置。

$(document).scroll(function () {
var y = $(this).scrollTop();
if (y > 55) {
    $('.bottomMenu').fadeIn();
} else {
    $('.bottomMenu').fadeOut();
}});$("body a.rep").live('click', function(){$(this).parents('#header').hide().prependTo("body").slideDown();});

Answer 1

不要使用.live（）使用.on（）。 .live（）已弃用。看 here 进行演示。

var clicked_btn = false;

$(document).scroll(function () {
    var y = $(this).scrollTop();

    if(clicked_btn) 
    {
        if(y < 55)
        {
            clicked_btn = false;
            $('#header').css('position','fixed');
        }   
    }
    else
    {
        if (y > 55) 
        {
            $('.bottomMenu').fadeIn();
        } 
        else 
        {
            $('.bottomMenu').fadeOut();

        }
    }
});
$("a.rep").on('click', function(){
    $('#header').css('position','relative');
    $(this).parent().hide();
    clicked_btn = true;
});

我更改标题的位置css属性，这样当你点击x anchor标签时它会上升。然后我隐藏了锚标记的父级（它会将css的显示属性更改为无）。并且将clicked_btn的锚标记记录为True。在窗口的滚动事件中，我正在检查锚标记的状态，如果它是错误的，你的逻辑代码将被执行，如果它是真的并且滚动条的位置小于55px，它将把锚标记的状态改为false并且后退标题的css属性为fixed。

Answer 2

将脚本更改为....

var closed = false;

$(document).scroll(function () {
    var y = $(this).scrollTop();
    if (y > 55 && !closed) {
        $('.bottomMenu').fadeIn();
    } else {
        $('.bottomMenu').fadeOut();
    }

});

$("div.bottomMenu").on('click', function(){
    $('#header').css('position','static');
    $('div.bottomMenu').hide();
    closed = true;
});

请注意，我将标题的位置更改为静态，并将click事件附加到div而不是anchor。您可能希望重新考虑这一点并使用css类而不是直接操作css属性。此外，我将标头包装在一个块div内，因此很好地为标题保留了一些空间而不是使用边距。

<强> Working Fiddle

单击按钮时将标题移至顶部

2 个答案: