寫在前面：
記錄對一個小問題的不算解決的方法，大家如果有更好的方法，歡迎交流，謝謝
Demo百度雲鏈接：http://pan.baidu.com/s/1qW9NLlM
問題說明：上面導航欄固定，頁面內實現錨點平滑跳轉，跳轉時如何使頁面處於導航欄之下？
解決方式：通過一個div，給div導航的高度，每次跳至div處
問題圖片：
希望藍色位於導航下方：
解決后的問題圖片：
補加一個div，定位到紅色處
頁面平滑跳轉代碼javascript
<script> $('.learnmore').click(function(){ $('html,body').animate({scrollTop:$('#fir1').offset().top},800); }); </script>
scrollTop設置或獲取位於對象最頂端和窗口中可見內容的最頂端之間的距離
offsetTop獲取對象相對於版面或由offsetTop屬性指定的父坐標的計算頂端位置
也可以用如下代碼直接確定隱藏的高度，但是需要每次計算高度
$('html,body').animate({scrollTop:300},800);
如下是demo全部代碼，其中引用了bootstrap.css/js/Jquery
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="css/bootstrap.css">
<script src="js/jquery.js" type="text/javascript" ></script>
<style type="text/css" media="screen">
html,body{padding: 0px;margin: 0px;}
#nav_bg{height: 74px;background:rgba(0,0,0,0.7);}
.main_button{margin-top:155px ;text-align:center; width:278px;height:70px;border:1px solid #fff; border-radius: 8px;margin-left:436px;background-color: #343434;}
.main_button a{color:#fff;font-size:36px;line-height: 70px; }
.main_sec {height:579px;}
.fir1{height:400px; background:rgba(58,255,255,1);padding:50px 0px 0px 50px; }
.fir2{height:400px; background:rgba(234,234,234,1);padding:50px 0px 0px 50px;}
</style>
</head>
<body>
<header id="header" class="header">
<nav class="navbar navbar-fixed-top jsk-nav" role="navigation" id="nav_bg">
<div class="container">
<div class="collapse navbar-collapse" >
<ul class="nav navbar-nav " id="nav_ul">
<li>
<a href="#Redir1">博客園</a>
</li>
<li>
<a href="#Redir2"> 博客園</a>
</li>
<li>
<a href="#Redir3"> 博客園 </a>
</li>
<li>
<a href="#Redir4">博客園 </a>
</li>
</ul>
</div> <!-- collapse navbar-collapse -->
</div> <!-- container -->
</nav>
</header><!-- /header -->
<section class="main_sec" >
<div class="container">
<div class="row">
<div class="col-md-12 text-center main_button">
<a href="#fir1" class="learnmore">Learn More</a>
</div> <!-- col-md-12 -->
</div>
</div>
<div style="background-color: red;height:76px;margin:277px;" id="fir1"></div>
</section>
<section class="fir1" >
<div class="container" >
<div class="row" >
<div class="col-md-7 " >
<p>博客園</p>
<p>一個IT技術人員想為IT技術人員們提供一個純凈的技術交流空間，博客園很長時間只有一個不能再簡單的博客，有近四年，博客園僅靠一個人幾年工作的積蓄在維持，互聯網浪潮的此起彼伏，"博客"從耀眼的明星成為平民，這些似乎都與博客園無關，博客園一步一個腳印地走着自己的路，傻傻地對每個用戶注冊進行人工審批、對首頁內容寧缺毋濫、對不合適的廣告拒之門外，傻傻地對用戶體驗關懷備至，對盈利模式冷若冰霜。這樣一個不起眼的地方，卻吸引了很多IT技術精英，把這里當作自己的網上家園，每天在這里分享着精彩的原創內容，也許他們看重的不是華麗的外表、誘人的虛名，而是純凈、專注、對技術人員的理解。</p>
</div>
</div>
</div>
</section>
<section class="fir2" >
<div class="container" >
<div class="row" >
<div class="col-md-7 " >
<p>博客園</p>
<p>一個IT技術人員想為IT技術人員們提供一個純凈的技術交流空間，博客園很長時間只有一個不能再簡單的博客，有近四年，博客園僅靠一個人幾年工作的積蓄在維持，互聯網浪潮的此起彼伏，"博客"從耀眼的明星成為平民，這些似乎都與博客園無關，博客園一步一個腳印地走着自己的路，傻傻地對每個用戶注冊進行人工審批、對首頁內容寧缺毋濫、對不合適的廣告拒之門外，傻傻地對用戶體驗關懷備至，對盈利模式冷若冰霜。這樣一個不起眼的地方，卻吸引了很多IT技術精英，把這里當作自己的網上家園，每天在這里分享着精彩的原創內容，也許他們看重的不是華麗的外表、誘人的虛名，而是純凈、專注、對技術人員的理解。</p>
</div>
</div>
</div>
</section>
<script>
$('.learnmore').click(function(){
$('html,body').animate({scrollTop:$('#fir1').offset().top},800);
});
</script>
</body>
</html>