Jquery scrollTo仅以小增量向上滚动

时间:2010-10-20 13:20:14

标签: javascript jquery jquery-animate scrollto

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

Click here to view the page,您需要滚动到页面底部,然后用两根手指选择项目。您需要手动向下滚动并单击右侧的链接以查看上面提到的行为(抱歉,它有点复杂)。

3 个答案:

答案 0 :(得分:2)

不需要使用插件。

试试以下代码 -

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

答案 1 :(得分:2)

我使用这个小片段滚动

    ///  <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);
    }

答案 2 :(得分:0)

感谢你们两位的回答。我已经知道问题是我用CSS隐藏了名称标签的父div并用JS显示。这导致浏览器不知道如何找到名称标签(或类似的东西)。我删除了显示:没有来自CSS并且瞧!