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

然后functiongoToBottom(){$('html,body').animate({scrollTop:$('.bottom_box').offset().top},300,"线性");};解决这个问题。第二种写法使用了jquery.waypoints.min.js插件，然后百度下载，不解释。然后动画效果animate.css代码也加入了。animated{-webkit-animation-duration:1s;动画持续时间：1s；-webkit-animation-fill-mode：两者；动画填充模式：两者；}@-webkit-keyframesfadeInLeftSmall{from{opacity:0;变换：translate3d(-10px,0,0);变换：translate3d(-10px,0,0);}至{不透明度：1；-webkit-转换：无；变换：无；}}@keyframesfadeInLeftSmall{来自{不透明度：0;-webkit-transform:translate3d(-10px,0,0);变换：translate3d(-10px,0,0);}至{不透明度：1；-webkit-转换：无；变换：无；}}然后正文js写成如下。varanimateConfig={fadeInDownSmall:'animatedfadeInDownSmall',fadeInLeftSmall:'animatedfadeInLeftSmall',fadeInRightSmall:'animatedfadeInRightSmall',fadeInUpSmall:'animatedfadeInUpSmall',bounce:'animatedbounce'}){//设置顶部的选中状态菜单$("#companyMenu").addClass('active');//声明页面需要添加动画的对象数组varclassArray=[{id:'animationUp01',classname:'fadeInUpSmall'},{id:'animationUp02',classname:'fadeInUpSmall'},{id:'animationUp03'，类名：'fadeInUpSmall'}，{id：'animationUp04'，类名：'fadeInUpSmall'}，{id：'animationUp05'，类名：'fadeInUpSmall'}，{id：'animationUp06'，类名：'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:namevalue:对应的动画效果类名*/varscrollPoint=function(opts){var_this=this;$.each(opts.classArray,function(i,item){var_scrollPoint=item.idvar_animateName=item.classname;_scrollPoint=newWaypoint({元素：document.getElementById(item.id),处理程序：函数（方向){$("#"+item.id).toggleClass(_this.animateConfig[_animateName]);},offset:'100%'});});};直接在html中配置id，滑动到底部某个元素执行动画byebye即可