javascript - 返回顶部按钮未正确触发

标签 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%' });
});

最佳答案

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

关于javascript - 返回顶部按钮未正确触发,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32791677/

相关文章:

javascript - Yii加载动态添加(使用ajax)GridView TypeError : settings is undefined

javascript - 带有 ng-repeat 水平标题的 ng-Grid

javascript - 从 JavaScript 模型中的现有属性返回未定义

javascript - 如何有条件地使用 javascript,如 CSS3 媒体查询、方向?

html - 在 safari 上看不到固定位置的完整图像

javascript - 检查按钮点击事件并做一些事情,如果用户点击其他地方则删除它们

javascript - Vuejs更新父数据时更新子组件

javascript - JQuery 和动态表行

Javascript - 删除数组项和 DOM

javascript - 当我添加命中检测时,我的 Canvas 消失了