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就行了，搞定底部滑動到某個元素執行動畫。

拜拜