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

Question

我有一个滚动到顶部按钮，该按钮是通过我从众多示例之一中获得的代码实现的。 效果很好。 我更改了计时功能的外观，以使其不会在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>

谢谢你的帮助。

Answer 1

试试这个-

<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>

Answer 2

看看这个小提琴： http : //jsfiddle.net/ro39dkaL/2/

您不必使用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;
    });

});

Answer 3

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

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

可以使用jquery .offset（）。

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

Answer 4

我做了这个小提琴，然后使用了另一种方法：如您所见，我将一个div标识为scroll_toggle 。 当用户到达该div时（显然您可以删除文本，这只是一个演示）。

这是小提琴： http : //jsfiddle.net/afilini/7633pr0r/