使用ScrollMagic和Parallax Design平滑滚动

时间:2016-10-24 20:47:47

标签: jquery html web parallax scrollmagic

我在我的网站上结合了视差滚动和ScrollMagic,但遇到了锚链接滚动问题:链接工作滚动到页面上的位置;滚动并不平滑,只是跳跃。

以下是相关代码:

<script>
    $(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 > 0) {
                e.preventDefault();

                // trigger scroll
                controller.scrollTo(id);

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


    });
</script>

如何成功实现平滑滚动?

0 个答案:

没有答案