h5滑动到底部写法以及滑动到某个元素执行动画写法（随笔小记）

前言

不说废话直接上，分别解决两个问题，问题一：滑动到底部写法。问题二：滑动到某个元素执行动画写法。

问题一写法

在body的底部放置一个<div class="bottom_box"></div>
然后

function goToBottom() {
    $('html,body').animate({scrollTop:$('.bottom_box').offset().top}, 300,"linear");
};

搞定

问题二写法

借助jquery.waypoints.min.js插件，然后自行百度下载不解释

然后是动画效果animate.css代码也加上

.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

@-webkit-keyframes fadeInLeftSmall {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-10px, 0, 0);
        transform: translate3d(-10px, 0, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes fadeInLeftSmall {
    from{
        opacity: 0;
        -webkit-transform: translate3d(-10px, 0, 0);
        transform: translate3d(-10px, 0, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

然后正文js写法如下。

var animateConfig = {
    fadeInDownSmall: 'animated fadeInDownSmall',
    fadeInLeftSmall: 'animated fadeInLeftSmall',
    fadeInRightSmall: 'animated fadeInRightSmall',
    fadeInUpSmall: 'animated fadeInUpSmall',
    bounce: 'animated bounce'
};

$(function(){
    //设置顶部的菜单选中状态
    $("#companyMenu").addClass('active');

    //声明页面中需要添加animation动画的对象数组
    var classArray = [{
        id: 'animationUp01',
        classname: 'fadeInUpSmall'
    }, {
        id: 'animationUp02',
        classname: 'fadeInUpSmall'
    }, {
        id: 'animationUp03',
        classname: 'fadeInUpSmall'
    }, {
        id: 'animationUp04',
        classname: 'fadeInUpSmall'
    }, {
        id: 'animationUp05',
        classname: 'fadeInUpSmall'
    }, {
        id: 'animationUp06',
        classname: 'fadeInUpSmall'
    }, {
        id: 'animationUp07',
        classname: 'fadeInUpSmall'
    }, {
        id: 'animationUp08',
        classname: 'fadeInUpSmall'
    }, {
        id: 'animationUp09',
        classname: 'fadeInUpSmall'
    }, {
        id: 'animationUp10',
        classname: 'fadeInUpSmall'
    }, {
        id: 'animationUp11',
        classname: 'fadeInUpSmall'
    }];

    //调用方法
    scrollPoint({
        classArray: classArray
    });
});

/*
 * 添加animate 动画效果
 * opts 两个参数
 * classArray:需要添加效果的元素数组集合【key代表元素ID，value代表元素需要添加的样式名称】
 * el:效果数组集合，key:名称 value:对应的animation效果类名
 */
var scrollPoint = function(opts) {
    var _this = this;
    $.each(opts.classArray, function(i, item) {
        var _scrollPoint = item.id
        var _animateName = item.classname;
        _scrollPoint = new Waypoint({
            element: document.getElementById(item.id),
            handler: function(direction) {
                $("#" + item.id).toggleClass(_this.animateConfig[_animateName]);
            },
            offset: '100%'
        });
    });
};

html里面就直接配置上id就好了，搞定底部滑动到某个元素执行动画。

拜拜