检测页面滚动是否加载文档时进行了滚动

Question

我正在使用 scrollTop 来检测用户是否滚动，然后 fadeIn 一个元素：

$(document).ready(function() {
    // scroll to top
    $(window).scroll(function() {
        if ($(this).scrollTop() >= 700) { // if page is scrolled more than 700px
            $('#return-to-top').fadeIn(200);
        } else {
            $('#return-to-top').fadeOut(200);
        }
    });
});

如果用户加载页面然后滚动，它可以很好地工作，但是如果用户已经在700px以下并重新加载或返回同一页，则元素不会在文档加载时自动淡入。似乎它没有检测到页面已经滚动。

你有什么关于我的代码有什么问题的想法吗？

- propcode

---

你能发布HTML吗？ - rrk

Answer 1

当文档准备就绪时，请进行测试。

最好创建一个函数。

function checkScroll(){
    if ($(window).scrollTop() >= 700) {
        $('#return-to-top').fadeIn(200);
    } else {
        $('#return-to-top').fadeOut(200);
    }
}

$(document).ready(function() {
    checkScroll();
    $(window).scroll(checkScroll);
});

- Elheni Mokhles

Answer 2

使用这种方式调用您的函数

将此行放在您的文档准备就绪的末尾。

$(window).scroll();

- Man Programmer

Answer 3

在委托之后简单地触发滚动。

$(document).ready(function() {
    // scroll to top
    $(window).scroll(function() {
        if ($(this).scrollTop() >= 700) { // if page is scrolled more than 700px
            $('#return-to-top').fadeIn(200);
        } else {
            $('#return-to-top').fadeOut(200);
        }
    }).scroll();
    //^^^^^^ trigger scroll.
});

- rrk