Smooth out scrolling with ScrollMagic and Parallax Design
<p>I'm combining Parallax scrolling and ScrollMagic on my website, but have encountered problems with anchor link scrolling: the links work to scroll to the place on the page; the scrolling isn't smooth and just jumps.</p>

<p>Here's the relevant code:</p>

<pre><code>&lt;script&gt;
    $(function() {
        var controller = new ScrollMagic.Controller();

        var tween = TweenMax.from("#animate", 0.5, {autoAlpha: 0, scale: 0.7});

        var scene = new ScrollMagic.Scene({triggerElement: "a#home", duration: 200, triggerHook: "onLeave"})
            .setTween(tween)
            .addIndicators() // add indicators (requires plugin)
            .addTo(controller);

        // change behaviour of controller to animate scroll instead of jump
        controller.scrollTo(function (newpos) {
            TweenMax.to(window, 0.5, {scrollTo: {y: newpos}});
        });

        //  bind scroll to anchor links
        $(document).on("click", "a[href^='#']", function (e) {
            var id = $(this).attr("href");
            if ($(id).length &gt; 0) {
                e.preventDefault();

                // trigger scroll
                controller.scrollTo(id);

                // if supported by the browser we can even update the URL.
                if (window.history &amp;&amp; window.history.pushState) {
                    history.pushState("", document.title, id);
                }
            }
        });


    });
&lt;/script&gt;
</code></pre>

<p>How can I successfully achieve a smooth scroll?</p>