Jquery scrollTo 仅以小增量向上滚动

发布于 2024-09-28 10:46:30 字数 222 浏览 7 评论 0原文

我正在使用scrollTo插件滚动到一些标题。问题是它只会以小增量向上滚动,这是由浏览器窗口的高度决定的。它似乎无法识别我正在使用的 id。

点击此处查看页面,您需要滚动到页面底部并用两根手指选择项目。您需要手动向下滚动并单击右侧的链接才能看到上述行为(抱歉有点复杂)。

I am using the scrollTo plugin to scroll to some headings. The problem it will only scroll upwards in small increments that is determined by the height of the browser window. It does not seem to recognise the id's I am using.

Click here to view the page, you will need to scroll to the bottom of the page and select the item with two fingers. You need to manually scroll down and click on the links on the right to see the behavior mentioned above (sorry it's a bit complex).

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

扫码二维码加入Web技术交流群

发布评论

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

评论(3

墨落画卷 2024-10-05 10:46:30

无需为此使用插件。

只需尝试下面的代码 -

   $('html').animate({
    scrollTop: $('#id where you want to scroll').offset().top
    }, 2000);

No need to use plugin for this.

Just try below code -

   $('html').animate({
    scrollTop: $('#id where you want to scroll').offset().top
    }, 2000);
辞慾 2024-10-05 10:46:30

我用这个小片段进行滚动

    ///  <summary>
    ///     Scrolls the page to a single matched element.
    ///     Limitations: The document can only scroll a maximum of it's height. If an element is at the bottom of a page with nothing
    ///     below it then it cannot move that element to the top of the page as nothing exists to fill the space.
    ///  </summary>
    ///  <param name="target" type="String">
    ///     The element to scroll to
    ///  </param>
    ///  <param name="padding" type="Integer">
    ///     The padding to add to the scrolling destination. Negative values reduce the scrolling distance.
    ///  </param>
    ///  <param name="speed" type="Integer">
    ///     The the speed at which to perform the animation. Positive integers only.
    ///  </param>
    function scrollTo(target, padding, speed) {

        // Define our variables.
        var target_offset, target_top;

        // Fix our value to add the selector.
        if (target.indexOf("#") == -1) {
            target = "#" + target;
        }

        // Get the top offset of the target anchor and add any necessarry padding.
        target_offset = $(target).offset();
        target_top = target_offset.top + padding;

        // Scroll to that anchor by setting the body to scroll to the anchor top.
        $("html").animate({ scrollTop: target_top }, speed);
    }

I use this little snippet for scolling

    ///  <summary>
    ///     Scrolls the page to a single matched element.
    ///     Limitations: The document can only scroll a maximum of it's height. If an element is at the bottom of a page with nothing
    ///     below it then it cannot move that element to the top of the page as nothing exists to fill the space.
    ///  </summary>
    ///  <param name="target" type="String">
    ///     The element to scroll to
    ///  </param>
    ///  <param name="padding" type="Integer">
    ///     The padding to add to the scrolling destination. Negative values reduce the scrolling distance.
    ///  </param>
    ///  <param name="speed" type="Integer">
    ///     The the speed at which to perform the animation. Positive integers only.
    ///  </param>
    function scrollTo(target, padding, speed) {

        // Define our variables.
        var target_offset, target_top;

        // Fix our value to add the selector.
        if (target.indexOf("#") == -1) {
            target = "#" + target;
        }

        // Get the top offset of the target anchor and add any necessarry padding.
        target_offset = $(target).offset();
        target_top = target_offset.top + padding;

        // Scroll to that anchor by setting the body to scroll to the anchor top.
        $("html").animate({ scrollTop: target_top }, speed);
    }
蔚蓝源自深海 2024-10-05 10:46:30

感谢你们两位的回答。我发现问题是我用CSS隐藏了名称标签的父div并用JS显示。这导致浏览器不知道如何找到名称标签(或类似的东西)。我从 CSS 中删除了 display:none ,瞧!

Thank you to both of you for your answers. I have worked out that the issue was I was hiding my parent div of the name tags with CSS and showing with JS. This was causing the browser to not know how to locate the name tags (or something like that). I removed the display:none from the CSS and voila!

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文