Jquery scrollTo only scrolling up in small increments

Question

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

Answer 1

No need to use plugin for this.

Just try below code -

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

Answer 2

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

Answer 3

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!