返回顶部按钮未正确触发

时间:2015-09-25 22:43:43

标签: javascript jquery html scroll jquery-animate

当你滚动一点时我会出现一个回到顶部的按钮。它正常工作但滚动时如果我到了页脚我希望按钮超过页脚。

当我到达页面底部时,我使用jquery animate方法更改了按钮的bottom css规则。但是这种效果并不会立即在我的网站上发生,因为我有更多的JavaScript,我认为它需要在运行效果之前检查所有代码并且它不能正常工作。

问题出在哪里?这就是我所做的:JSFIDDLE

var offset = 250;
var duration = 500;
$(window).scroll(function () {
    if ($(this).scrollTop() > offset) {
        $('.back-to-top').fadeIn(duration);
    } else {
        $('.back-to-top').fadeOut(duration);
    }
});

$('.back-to-top').on('click', function () {
    event.preventDefault();
    $('html,body').animate({ scrollTop: 0 }, duration);
    return false;
});

$(window).scroll(function () {
    if ($(window).scrollTop() + $(window).height() == $(document).height()) {
        $('.back-to-top').animate({ 'bottom': '400px' });
    } else $('.back-to-top').animate({ 'bottom': '10%' });
});

1 个答案:

答案 0 :(得分:1)

似乎添加了一个更改div位置的类,并在条件为真时切换它解决了问题。