jQuery 滚动到元素，仅当元素不在视图中 – jQuery

在本文中，我们将介绍如何使用jQuery实现滚动到元素，但只有当元素不在视图中时才滚动。

有时候，我们可能需要在页面上滚动到特定的元素位置。这可以通过jQuery中的动画效果和滚动方法来实现。然而，如果目标元素已经在当前视图中可见，我们可能希望避免滚动，以防止对用户造成不必要的干扰。

为了判断一个元素是否在当前视图中可见，我们可以使用jQuery的$(window).scrollTop()和$(element).offset().top方法来获取元素和窗口的相对位置，并根据它们的值来确定是否需要滚动。

下面是一个示例代码，演示了如何使用jQuery在只有当元素不在视图中时才滚动到该元素的位置：

$(document).ready(function() {
    // 监听滚动事件
    $(window).scroll(function() {
        // 获取目标元素和窗口的位置
        var elementOffset = $('#target-element').offset().top;
        var windowScrollTop = $(window).scrollTop();
        var windowHeight = $(window).height();

        // 判断元素是否在视图中可见
        var elementInView = (elementOffset > windowScrollTop) && (elementOffset < windowScrollTop + windowHeight);

        // 如果元素不在视图中可见，则滚动到该元素的位置
        if (!elementInView) {
            $('html, body').animate({
                scrollTop: elementOffset
            }, 500);
        }
    });
});

在上面的示例代码中，我们使用$(window).scroll()方法监听页面的滚动事件。每当滚动事件触发时，我们获取目标元素和窗口的位置信息，并使用offset()方法来计算它们的相对位置。

然后，我们使用条件语句判断目标元素是否在当前视图中可见。如果不可见，我们使用animate()方法来实现平滑的滚动效果，将窗口滚动到目标元素的位置。

这样，当用户滚动页面时，如果目标元素在当前视图中可见，页面将不会滚动。只有当目标元素不在视图中时，才会触发滚动效果。

阅读更多：jQuery 教程