說明文檔編寫

項目須要作一個說明文檔來介紹公司軟件，在網上參考了不少文檔的寫法，也問過不少朋友之類的，最後本身慢慢的把這個文檔完成了。本文只是爲了把它記錄下來，爲之後須要在作這塊提供借鑑。

設計圖以下：

header 部分和目錄是 fixed 定位，目錄的 html 結構以下：

<ul id="directory">
    <li id="onfirst" class="on">1、關於Auto-Trader Pro</li>
    <ul>
        <li id="onfirst_1">系統簡介</li>
        <li id="onfirst_2">系統配置</li>
        <li id="onfirst_3">意見反饋與更多幫助</li>
    </ul>
    <li id="onsecond">2、快速入門</li>
    <ul>
        <li id="onsecond_1">產品安裝</li>
        <li id="onsecond_2">系統登陸</li>
        <li id="onsecond_3">交易帳戶設值</li>
        <li id="onsecond_4">主界面介紹</li>
        <li id="onsecond_5">啓動Matlab</li>
    </ul>
</ul>

右邊的內容結構以下：

<div id='content'>
    <section>
        <h1 id="first" class="test">1、關於Auto-Trader Pro</h1>
        <h4 id="first_1" class="test">1．系統簡介</h6>
        <div class="text"></div>
        <h4 id="first_2" class="test">2．系統配置</h6>
        <div class="text"></div>
        <h4 id="first_3" class="test">3．意見反饋與更多幫助</h6>
        <div class="text"></div>
    </section>
    <section>
        <h1 id="second" class="test">2、快速入門</h1>
        <h4 id="second_1" class="test">1．產品安裝</h6>
        <div class="text"></div>
        <h4 id="second_2" class="test">2．系統登陸</h6>
        <div class="text"></div>
        <h4 id="second_3" class="test">3．意見反饋與更多幫助</h6>
        <div class="text"></div>
        <h4 id="second_4" class="test">4．主界面介紹</h6>
        <div class="text"></div>
        <h4 id="second_5" class="test">5．啓動Matlab</h6>
        <div class="text"></div>
    </section>
</div>            

而後就是 js 了，這裏我用 jquery 的 animate 動畫來實現頁面滾動。

js 代碼以下：

var arrTop = new Array;
var flag   = true;
for (var i = 0; i < $('.test').length; i++) {
    arrTop.push( $('.test').eq(i).offset().top - 100 );
};
$('#directory li').each(function(index){
    $(this).click(function(){
        flag = false;
        $('#directory li').removeClass('on');
        $(this).addClass('on');
        $("body, html").stop().animate({ scrollTop: arrTop[index] }, 1000, function(){ flag = true });
    })
});
changeStyle();
window.onscroll = function(){
    if ( flag ) {
        changeStyle();
    }        
};
function changeStyle(){
    var aTop = - parseInt(document.body.getBoundingClientRect().top);
    for (var index = 0; index < arrTop.length; index++) {
        if (arrTop[index] <= aTop && aTop < arrTop[index + 1]) {
            $('#directory li').removeClass('on');
            $("#directory li").eq(index).addClass('on');                
        }
    }
}

先把內容中每一個標題相對文檔的位置中的 top 值保存在一個 arrTop 數組裏，爲何要減去 100，由於 header 的高度是 100px(header 是固定定位)，而內容要恰好顯示在 header 底下。而後點擊每一個目錄裏的 li 調用 scrollTo 這個方法就行，後面的 1000 表示時間 1 秒。

window.onscroll 頁面滾動事件，aTop 表示可視窗口離整個頁面的高度，滾動的時候經過判斷這個高度在 arrTop 數組哪兩個相鄰的元素之間來給相應的目錄標題添加樣式。

flag 是一個開關，用來阻止點擊目錄標題引發的滾動，調用 changeStyle 這個函數給滾動期間通過的目錄標題添加樣式。

若有更好的思路或者更好用的插件，歡迎在評論中指出，謝謝！