人生要有奮斗和帑力，才能有美好人生！
寫(xiě)在前言：
1.雖然這些案例都比較基礎(chǔ)，但是實(shí)戰(zhàn)工作是非常實(shí)用的。
2.每個(gè)實(shí)例代碼都可以復(fù)制粘貼到html啟動(dòng)運(yùn)行看到效果。
3.每篇文章都會(huì)有2-3個(gè)小案例，都是非常簡(jiǎn)單和實(shí)用。
4.不懂jquery小伙伴們都可以去jquery官方學(xué)習(xí) http://jquery.com/
5.我什么都不要，我只要贊，贊，贊。重要事情要說(shuō)三遍！
案例：
一、平滑滾動(dòng)頁(yè)面的某個(gè)區(qū)域。
下面圖片是京東的首頁(yè),我們可以點(diǎn)擊左側(cè)導(dǎo)航的每一個(gè)分類(lèi)都會(huì)平滑頁(yè)面上一個(gè)區(qū)域。
技術(shù)運(yùn)用：animate()函數(shù)和offset()的函數(shù)
實(shí)現(xiàn)思路
1.利用offset().top獲取區(qū)域在document的偏移的高度
2.利用animate()函數(shù)進(jìn)行動(dòng)畫(huà)效果滾動(dòng)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>平滑滾到頁(yè)面某個(gè)錨點(diǎn)</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">點(diǎn)擊滾動(dòng)頁(yè)面中部</button>
<button id="btn2" page-scroll="#foot">點(diǎn)擊滾動(dòng)頁(yè)面底部</button>
<div id="wrap" class="div">
頁(yè)面中部
</div>
<div id="foot" class="div">
頁(yè)面底部
</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>
二、實(shí)現(xiàn)左右div自適應(yīng)相同的高度
前端網(wǎng)頁(yè)設(shè)計(jì)經(jīng)常會(huì)出現(xiàn)這樣一個(gè)問(wèn)題:頁(yè)面左側(cè)導(dǎo)航才幾個(gè)鏈接，而且很短。頁(yè)面右側(cè)的正文部分可能很長(zhǎng)，這導(dǎo)致布局很難看和不協(xié)調(diào)。怎么才能讓左右的的高度相同呢？答案就是動(dòng)態(tài)的改變高度
技術(shù)運(yùn)用：outerHeight()函數(shù)
實(shí)現(xiàn)思路
1.判斷右側(cè)高度是否高于左側(cè)的高度，如果高于讓左側(cè)的高度等于右側(cè)高度。
2.把函數(shù)封裝起來(lái)，當(dāng)有地方改變了內(nèi)容高度的時(shí)候，就可以調(diào)用這函數(shù)來(lái)自使用高度。
3.這段代碼比較簡(jiǎn)單，請(qǐng)自行實(shí)現(xiàn)。
實(shí)現(xiàn)效果
右側(cè)超出的部分左右兩側(cè)對(duì)齊
前端實(shí)戰(zhàn)系列我會(huì)持續(xù)更新，歡迎大家來(lái)簡(jiǎn)書(shū)關(guān)注我。（第一次寫(xiě)文章，有什么不對(duì)地方可以留言_）
