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

How do I make a scroll to top button appear when a pre-determined part of the page appears?

本文关键字：定部 滚动 何使 顶部 按钮      更新时间：2023-09-26

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

感谢您的任何帮助。

试试这个--

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

看看这个小提琴： 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;
    });
});

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

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

可以使用 jquery .offset（）。

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

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

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

相关文章：