人生要有奮斗和帑力哗魂，才能有美好人生蔼囊！
寫在前言：
1.雖然這些案例都比較基礎(chǔ)蒙幻，但是實戰(zhàn)工作是非常實用的映凳。
2.每個實例代碼都可以復(fù)制粘貼到html啟動運行看到效果。
3.每篇文章都會有2-3個小案例邮破，都是非常簡單和實用诈豌。
4.不懂jquery小伙伴們都可以去jquery官方學(xué)習 http://jquery.com/
5.我什么都不要，我只要贊抒和，贊矫渔，贊。重要事情要說三遍摧莽！
案例：
一庙洼、平滑滾動頁面的某個區(qū)域。
下面圖片是京東的首頁,我們可以點擊左側(cè)導(dǎo)航的每一個分類都會平滑頁面上一個區(qū)域镊辕。
技術(shù)運用：animate()函數(shù)和offset()的函數(shù)
實現(xiàn)思路
1.利用offset().top獲取區(qū)域在document的偏移的高度
2.利用animate()函數(shù)進行動畫效果滾動
<!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>
二油够、實現(xiàn)左右div自適應(yīng)相同的高度
前端網(wǎng)頁設(shè)計經(jīng)常會出現(xiàn)這樣一個問題:頁面左側(cè)導(dǎo)航才幾個鏈接，而且很短征懈。頁面右側(cè)的正文部分可能很長石咬，這導(dǎo)致布局很難看和不協(xié)調(diào)。怎么才能讓左右的的高度相同呢卖哎？答案就是動態(tài)的改變高度
技術(shù)運用：outerHeight()函數(shù)
實現(xiàn)思路
1.判斷右側(cè)高度是否高于左側(cè)的高度鬼悠，如果高于讓左側(cè)的高度等于右側(cè)高度虏束。
2.把函數(shù)封裝起來，當有地方改變了內(nèi)容高度的時候厦章，就可以調(diào)用這函數(shù)來自使用高度镇匀。
3.這段代碼比較簡單，請自行實現(xiàn)袜啃。
實現(xiàn)效果
右側(cè)超出的部分左右兩側(cè)對齊
前端實戰(zhàn)系列我會持續(xù)更新汗侵，歡迎大家來簡書關(guān)注我。（第一次寫文章群发，有什么不對地方可以留言_）
