Javascript 当页面的预定部分出现时，如何使滚动到顶部按钮出现？

我有一个滚动到顶部的按钮，我是通过代码实现的，这是我从众多例子中得到的。它工作得很好。我更改了其外观的计时功能，因此它不是在100像素后出现，而是在1340像素后出现。我这样做是因为在右边有一些框，我不想让按钮出现，直到它们被滚动并且出现空白以便按钮淡入。时间看起来很完美——我估计按钮出现在距页面顶部1340像素的位置之后

然而，我注意到，在另一个（更大的）屏幕上，按钮没有在正确的时间出现，而是在稍后出现。我意识到（如果我收集正确的话）1340规范不是页面顶部的绝对像素数，而是从浏览器窗口底部滚动的像素数。例如，如果我将浏览器窗口的高度从1000像素调整到400像素，然后重新加载页面，那么按钮将很快出现600像素

所以我的问题是，有没有办法改变我的代码，使按钮只出现一次页面的某个部分，从窗口顶部测量，出现在屏幕上

以下是我当前使用的javascript：

<script type="text/javascript">
    $(document).ready(function () {

        $(window).scroll(function () {
            if ($(this).scrollTop() > 1340) {
                $('#scrollup').fadeIn();
            } else {
                $('#scrollup').fadeOut();
            }
        });

        $('#scrollup').click(function () {
            $("html, body").animate({ scrollTop: 0 }, 500);
            return false;
        });

    });
</script>

$（文档）.ready（函数（）{
$（窗口）。滚动（函数（）{
if（$（this）.scrollTop（）>1340）{
$（“#向上滚动”）.fadeIn（）；
}否则{
$（“#向上滚动”）.fadeOut（）；
}
});
$（“#向上滚动”）。单击（函数（）{
$（“html，body”）.animate（{scrollTop:0}，500）；
返回false；
});
});

感谢您的帮助。

查看此小提琴：

代替使用1340计算框底部的位置，您可以动态计算位置，以便始终准确地反映情况：

$(document).ready(function () {

var elem   = $('#weblinks');  
var bottom = $(elem).position().top+$(elem).outerHeight(true)

    $(window).scroll(function () {
        if ($(this).scrollTop() > bottom) {
            $('#scrollup').fadeIn();
        } else {
            $('#scrollup').fadeOut();
        }
    });

    $('#scrollup').click(function () {
        $("html, body").animate({ scrollTop: 0 }, 500);
        return false;
    });

});

---

指定的1340为硬编码，并非在所有情况下都准确

更好的解决方案是在浏览器窗口中查找元素的高度

可以使用jquery.offset（）

var offset = $("#child").offset();
var fromTop = offset.top - $(window).scrollTop();

---

我制作了这个小提琴，我使用了另一种方式：正如你所看到的，我放置了一个id为

scroll\u toggle

的div。当用户到达这个div时（显然您可以删除文本，这只是一个演示）

这是小提琴：

试试这把--

$（文档）.ready（函数（）{
切换ScrollUp（）；
$（窗口）。滚动（函数（）{
切换ScrollUp（）；
});
$（“#向上滚动”）。单击（函数（）{
$（“html，body”）.animate（{scrollTop:0}，500）；
返回false；
});
});
函数ToggleScrollUp（）{
if（$（“.yourbox”）.offset（）.top<$（窗口）.scrollTop（）+$（窗口）.height（））{
$（“#向上滚动”）.fadeIn（）；
}否则{
$（“#向上滚动”）.fadeOut（）；
}
}

检查此问题：第一个答案可能解决您的问题。我试过调整屏幕的大小，但它在相同的位置仍然可以正常工作。@Stefan谢谢。我，呃，假设那会奏效。现在我最头疼的问题是，你知道我将如何在我的代码中实现这一点吗（我完全不懂javascript）。这个答案仍然使用特定数量的像素作为度量，如果我正确理解这个问题，问题是这个数字会因显示器而异。在这种情况下，使用航路点也太过分了。请查看我答案中的提琴，因为div的偏移量是动态计算的，这与页面的上下文无关。我在这里做错了什么吗？我将您的“#框”替换为我的“#网络链接”，这是最后出现的框。我还用“100”替换了你的“底部”。但是按钮出现得太早了。我做了反复试验，直到我发现1340是正确的#，但当我调整窗口大小时，它出现在不同的点上，所以我回到了原点。我做错什么了吗？是的，你不能替换“底部”，它是一个变量。你所需要做的就是将id从#box更改为你的最后一个元素，我猜从你的评论来看应该是#weblinks。我已经更新了脚本，使其更易于使用，请查看更新的小提琴。是的，这是一个有趣的。在#weblinks框之前，我还有其他框。比如说，价值1000像素。比如说#weblinks框的高度是200px。因此，当我完成所有操作时，按钮不会出现在#weblinks之后，而是出现在页面顶部200像素处，在1000像素的初始框中间。我尝试创建一个临时id，滚动高度，将其设置为1200px（虽然我的HTML中没有包含它），然后在代码中插入滚动高度而不是网页链接，看看这是否可行，但是不行。等等，你的JSFIDLE可能第二次更改了？我看到更多的盒子，它似乎正做着我想要的。让我检查一下。我已经有了一个有效的解决方案，但是如果你想看到整个代码，这就是我最初得到它的地方：我将把它作为解决方案，但需要注意的是：当屏幕上出现

.yourbox

的前40个像素时，我的40像素按钮就会出现。然而，看到我希望按钮显示在

.yourbox

下面，我在HTML中在

.yourbox

之后添加了一个，并在CSS中为它提供了一个间隙所需的高度。然后我创建了一个

，紧接着，出现了

#滚动条

替换JS中的

.yourbox

。也许您的JS可以进行调整，使按钮不仅出现在页面底部，而且出现在

下方。yourbox

？不管怎样，它是有效的。谢谢。如果可能的话，如果你知道如何根据我上面的评论调整你的JS，这将是一个更干净的解决方案&我会实现它。原样，&看看我如何在整个站点中使用服务器端包含，如果在某个页面上不需要

<script type="text/javascript">
    $(document).ready(function () {
        ToggleScrollUp();

        $(window).scroll(function () {
            ToggleScrollUp();
        });

        $('#scrollup').click(function () {
            $("html, body").animate({ scrollTop: 0 }, 500);
            return false;
        });
    });

    function ToggleScrollUp() {
        if ($(".yourbox").offset().top < $(window).scrollTop() + $(window).height()) {
            $('#scrollup').fadeIn();
        } else {
            $('#scrollup').fadeOut();
        }
    }
</script>