人生要有奋斗和帑力，才能有美好人生！
写在前言：
1.虽然这些案例都比较基础，但是实战工作是非常实用的。
2.每个实例代码都可以复制粘贴到html启动运行看到效果。
3.每篇文章都会有2-3个小案例，都是非常简单和实用。
4.不懂jquery小伙伴们都可以去jquery官方学习 http://jquery.com/
5.我什么都不要，我只要赞，赞，赞。重要事情要说三遍！
案例：
一、平滑滚动页面的某个区域。
下面图片是京东的首页,我们可以点击左侧导航的每一个分类都会平滑页面上一个区域。
Paste_Image.png
技术运用：animate()函数和offset()的函数
实现思路
1.利用offset().top获取区域在document的偏移的高度
2.利用animate()函数进行动画效果滚动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>平滑滚到页面某个锚点</title>
<style>
.div {
margin: 0 auto;
width: 100px;
height: 100px;
margin-top: 1000px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<button id="btn1" page-scroll="#wrap">点击滚动页面中部</button>
<button id="btn2" page-scroll="#foot">点击滚动页面底部</button>
<div id="wrap" class="div">
页面中部
</div>
<div id="foot" class="div">
页面底部
</div>
<script src="https://cdn.bootcss.com/jquery/2.2.0/jquery.js"></script>
<script>
scrollTop($('#btn1'));
scrollTop($('#btn2'));
function scrollTop($dom, time) {
$dom.on('click', function () {
var scrollTopDom = $(this).attr('page-scroll');
$('body').animate({
scrollTop: $(scrollTopDom).offset().top
}, time)
})
}
</script>
</body>
</html>
二、实现左右div自适应相同的高度
前端网页设计经常会出现这样一个问题:页面左侧导航才几个链接，而且很短。页面右侧的正文部分可能很长，这导致布局很难看和不协调。怎么才能让左右的的高度相同呢？答案就是动态的改变高度
Paste_Image.png
技术运用：outerHeight()函数
实现思路
1.判断右侧高度是否高于左侧的高度，如果高于让左侧的高度等于右侧高度。
2.把函数封装起来，当有地方改变了内容高度的时候，就可以调用这函数来自使用高度。
3.这段代码比较简单，请自行实现。
实现效果
右侧超出的部分左右两侧对齐
Paste_Image.png
前端实战系列我会持续更新，欢迎大家来简书关注我。（第一次写文章，有什么不对地方可以留言_）
