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

效果图：