滚动到不在视图中的特定 div

发布于 2024-12-23 02:03:09 字数 969 浏览 3 评论 0原文

我正在尝试滚动到特定 div 容器的顶部。目前我的代码是将页面内容滚动到视图中。有人知道出了什么问题吗？ :) 这是代码：

var openItem;

var showBox = function(item) {
    item.removeClass("loading");
    var infoBox = $("div.test", item);

    // Resize box
    item.width(853);
    item.height(infoBox.outerHeight());

    // Reload Masonry
    $('#container').isotope('reLayout');

    // Insert close button
    $('<a href="#" class="close">Close</a>"')
        .prependTo(".test .content")
        .click(function (e) {
            e.preventDefault();
            close(item);
        });

    // Insert close button
    $('<a href="#" class="close">Close</a>"')
        .appendTo(".test .content")
        .click(function (e) {
            e.preventDefault();
            close(item);
        });

    // Fade in test box
    setTimeout(function () {
        testBox.fadeIn();

        // Scroll box into view
        $(document).scrollTo(item, 1000);
    }, 280);
}

原文

I am trying to scroll to the top of a specific div container. Currently my code is instead scrolling the page content into view. Anybody has an idea how what's wrong? : ) Here's the code:

var openItem;

var showBox = function(item) {
    item.removeClass("loading");
    var infoBox = $("div.test", item);

    // Resize box
    item.width(853);
    item.height(infoBox.outerHeight());

    // Reload Masonry
    $('#container').isotope('reLayout');

    // Insert close button
    $('<a href="#" class="close">Close</a>"')
        .prependTo(".test .content")
        .click(function (e) {
            e.preventDefault();
            close(item);
        });

    // Insert close button
    $('<a href="#" class="close">Close</a>"')
        .appendTo(".test .content")
        .click(function (e) {
            e.preventDefault();
            close(item);
        });

    // Fade in test box
    setTimeout(function () {
        testBox.fadeIn();

        // Scroll box into view
        $(document).scrollTo(item, 1000);
    }, 280);
}

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

独自←快乐 2024-12-30 02:03:09

滚动到某个项目并不总是有效，因为 Isotope 使用 CSS 转换进行定位，而不是 top/left。您可以使用 transformsEnabled: false 禁用转换。更好的是，如果您需要使用同位素获取项目的位置，请使用 itemPositionDataEnabled。

回复收藏 0 原文

饭团 2024-12-30 02:03:09

我相信我看到了你的问题。尝试用以下代码替换您的 setTimeout 代码：

// Fade in test box
setTimeout(function() {
    testBox.fadeIn(function() {
        // Scroll box into view
        $(document).scrollTo(item, 1000);
    });
}, 280);

您的原始代码之前无法工作的原因是因为调用 $(document).scrollTo(item, 1000) 时 item 尚不可见，因此 scrollTo 不知道该项目位于何处。

编辑响应代码示例的评论：

看起来您所看到的错误不是由您上面发布的showBox函数造成的。该问题是由类 showMe 的元素在调用 scrollTo 函数后隐藏引起的。尝试在用户单击 showMe 元素后立即隐藏它们，而不是使其淡出。

I believe I see your problem. Try replacing your setTimeout code with this:

// Fade in test box
setTimeout(function() {
    testBox.fadeIn(function() {
        // Scroll box into view
        $(document).scrollTo(item, 1000);
    });
}, 280);

The reason your original code wasn't working before was because when $(document).scrollTo(item, 1000) was called item was not visible yet, so scrollTo didn't know where the item was located.

EDIT in response to comment with the code example:

It looks like the bug you're seeing is not by the showBox function you posted above. The problem is caused by elements with the class showMe getting hidden after the scrollTo function has been called. Try hiding the showMe elements as soon as the user clicks them instead of fading them out.

回复收藏 0 原文

~没有更多了~