jquery自動提取內容主題生成目錄并實現點擊跳轉

當頁面內容太多的時候，一定會有各級標題，而太長的內容對于用戶來說，訪問很不方便，如果能添加目錄并實現點擊跳轉，則用戶體驗大大提升。

從前端的角度來考慮，要解決這個問題其實很簡單，我們只需要創建一些節點，或者錨文本，再把鏈接指向到該處即可。所以，我們可以在后臺創建目錄，并分配對應節點或錨文本。但這樣做很不好：工作量太大且很不方便。于是就想有沒有辦法自動提取內容中的主題用作目錄，并實現呢？答案是肯定的，下面我們就來看一下，用jquery如何實現自動提取內容主題生成目錄并實現點擊跳轉：

首先，在后臺編輯內容的時候，需要有對應的主題可以提取

本例以h標題為提取根據。一般h1為文章標題，所以內容部分中應該是h2、h3、h4，這些在后臺編輯內容的很容易實現，并且從優化的角度來說，也應該這樣做，所以沒有多余的工作要做。以Kindeditor為例，先選中要設置為標題的內容，設置成標題即可，如下圖所示：

然后，在對應的前端頁面嵌入以下js語句

target = $("#article .fl");//需要提取目錄的內容所在包裹器，如果要進行相對定位，建議選擇上一級dom
$(document).ready(function() {
    GenerateContents();//提起目錄并實現點擊跳轉
});
function GenerateContents() {
    var num = 0;//第x個目錄 用于jquery跳轉實現
    var content = "<div id=quick>目錄";//創建的目錄的dom結構
    content += '<ul>';
    $("h2").each(function(){//遍歷內容中的所有h2標簽 作為一級目錄
        content += "<li>"+GenerateA(num,$(this).text());
        $(this).before(GenerateLabel(num));
        num++;
        var second = $(this).nextUntil("h2","h3");
        if (second) {
            content += "<ul>";
            second.each(function(){//變量內容中的所有h3標簽 作為二級目錄
                content += "<li>"+GenerateA(num,$(this).text())+"</li>";
                $(this).before(GenerateLabel(num));
                num++;
            });
            content += "</ul>";
        };
        content += "</li>";
    });
    content += "</ul></div>";
    target.append(content);//插入目錄到頁面中
}
function GenerateLabel(num){
    var a = "<a name = 'label" + num + "'></a>";
    return a;
}
function GenerateA(num ,text){
    var ss = "<a data-i='" + num +"'>" + text + "</a>";
    return ss;
}
//實現點擊跳轉
$('#quick a').live('click',function(){
    var _obj=$(this).attr('data-i');
        _obj=$('a[name=label'+_obj+']');
    var _top=_obj.position().top;
        _top-=80;
    $('html,body').animate({scrollTop:_top},500);
})

到此，提取內容主題生成目錄并實現點擊跳轉就已經實現了。當然，你應該還要結合css來進行定位，比如把目錄設置為固定（fixed）定位。

#quick{ position: fixed; left: 20px; top:140px; text-align: right;}
    #quick{ font-size: 18px; color: #999;}
    #quick a{ font-size: 14px; padding: 10px 0; font-weight: bold; cursor: pointer; color: #333;}
    #quick a:hover{ color: #fd5050;}
        #quick li li a{ font-weight: normal; color: #666;}

效果圖如下：

© 致遠 2020-02-25，原創內容，轉載請注明出錯：jquery自動提取內容主題生成目錄并實現點擊跳轉