Question

我有一个滚动到顶部按钮我通过代码实现，我从那里的众多例子之一。它很棒。我更改了其外观的计时功能，以便在1340之后出现100像素之后出现。我这样做是因为右侧有一些框，我不希望按钮出现，直到它们被滚动并清空因此，按钮可以显示空间。时间看起来很完美 - 按钮出现在我认为距离页面顶部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

我做了这个小提琴，我用另一种方式：正如你所看到的，我放置了一个id为scroll_toggle的div。当用户到达这个div时（显然你可以删除文本，这只是一个演示）。

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

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

4 个答案: