angular-fullpage实现尾屏效果

接 前一篇 angular-fullpage实现全屏滚动

<div full-page options="vm.homeOptions">

  <div class="section" data-anchor="section1"></div>

  <div class="section"
data-anchor="section2"></div>

  <div class="section"
data-anchor="section3"> </div>

  <div class="section" id="section-footer" data-anchor="footer"><div id="footer-text" style="height: 230px"></div></div>

</div>

修改jquery.fullpage.js 源代码performMovement方法,因为之前设置了css3为false，所以进到else中修改滚动到尾屏的处理方式

if (options.css3&&options.autoScrolling && !options.scrollBar) {

                var translate3d = 'translate3d(0px, -' + v.dtop + 'px, 0px)';

                transformContainer(translate3d, true);

            //even when the scrollingSpeed is 0 there's a little delay, which might cause the

            //scrollingSpeed to change in case of using silentMoveTo();

            if(options.scrollingSpeed){

                afterSectionLoadsId = setTimeout(function () {

                    afterSectionLoads(v);

                }, options.scrollingSpeed);

            }else{

                afterSectionLoads(v);

            }

        }

// using jQuery animate

else{

if (v.anchorLink == 'footer')//判断当滚动到尾屏如何做

    {

        var footer_a = $('#section-footer').height();

        var footer_h = $('#footer-text').height();
        var scrollSettings = getScrollSettings(v);
        scrollSettings.options = { 'top': -(v.dtop - footer_a + footer_h)};

        scrollSettings.element = WRAPPER_SEL;
        $(scrollSettings.element).animate(
            scrollSettings.options, options.scrollingSpeed, options.easing).promise().done(function () { //only one single callback in case of animating `html, body`
            afterSectionLoads(v);
        });
    }else{
        var scrollSettings = getScrollSettings(v);
        $(scrollSettings.element).animate(
            scrollSettings.options, options.scrollingSpeed, options.easing).promise().done(function () { //only one single callback in case of animating `html, body`
            afterSectionLoads(v);
        });
    }
}

效果图：