各位前輩好，我目前在撰寫公司內部的文件瀏覽網頁，
現在有一個帶有卷軸的標題列，我預設他只會顯示四個標題，
當我按下 "下一個" 或 "上一個" 時，才會將第一個標題隱藏、第五個標題顯示，
同時他會滾動卷軸，以讓標題可以完整顯示出來，
但我的 ScrollerBar 是自訂樣式的，且我有思考過，如果用更改 position 的方式，
頁面上全部的卷軸都會被我一起更改（因為卷軸都是一樣的），
目前我已經把動態更換標題的功能做出來了，想請教一下前輩們有沒有什麼想法？
這邊只貼點選下一個的 Code，因為點選上一個的 Code 大致相同。

JS：

function clickNext() {
    // 找出 id = smallTitle 的 li 內的 <a> 元素
    var elems = $('#smallTitle li a');
    // 找出現在被點擊的 id
    var activeIndex;
    for (var i = 0; i < elems.length; i++) {
        if (elems[i].classList.contains('action')) {
        activeIndex = i;
        break;
        }
    }

    // 將下一個 index 設為現在被點擊的標題 + 1
    var nextIndex = activeIndex + 1;
    // 設變數 quo = ( 下一個標題 + 1)的商數
    var quo = (parseInt((nextIndex + 1) / 4));
    // 判斷下一個標題是否 >= 4；以及下一個標題是否不等於標題列長度
    if (nextIndex >= 4 && nextIndex != elems.length) {
        // 若是，則先取下一個標題 index 的餘數
        var mod = (nextIndex + 1) % 4;
        // 判斷如果商數 >= 2
        if(parseInt((nextIndex + 1) / 4) >= 2){
        // 設定變數 hideIndex
        var hideIndex = nextIndex - 4;
        // 就將第 hideIndex 個標題隱藏（加入 hide）
        elems[hideIndex].classList.add('hide');
        // 將下一個標題顯示（拔掉 hide）
        elems[nextIndex].classList.remove('hide');
        // 將目前被點擊的標題的 action 拔掉
        elems[activeIndex].classList.remove('action');
        // 使下一個標題被點擊（加入 action）
        elems[nextIndex].classList.add('action');
        }else {
        // 反之若商數 <= 2，就把第 mod - 1 個標題隱藏（加入 hide）
        elems[mod - 1].classList.add('hide');
        // 將下一個標題顯示（拔掉 hide）
        elems[nextIndex].classList.remove('hide');
        // 將目前被點擊的標題的 action 拔掉
        elems[activeIndex].classList.remove('action');
        // 使下一個標題被點擊（加入 action）
        elems[nextIndex].classList.add('action');
        }
    // 第一個判斷式若不成立，就繼續判斷若下一個標題的 index，等於標題列的長度
    }else if (nextIndex === elems.length) {
        // 就把下一個標題的 index 設為 0;
        nextIndex = 0;
        // 將目前被點擊的標題的 action 拔掉
        elems[activeIndex].classList.remove('action');
        // 使下一個標題被點擊（加入 action）
        elems[nextIndex].classList.add('action'); 
        // 將下一個標題顯示（拔掉 hide）
        elems[nextIndex+1].classList.remove('hide');
        // 用標題列的長度去跑迴圈，且 len 小於標題列的長度，
        // 只要條件成立就將第 len % 4 個標題顯示
        for(var len = elems.length; len >= 4; len--){
        elems[len % 4].classList.remove('hide');
        }
        // 用標題列的長度去跑迴圈，且 k = 4 並遞增，
        // 只要條件成立就會把第 k 個標題顯示
        for (var k = 4; k < elems.length; k++) {
        elems[k].classList.add('hide');
        }
    }else {
        // 目前被點擊的標題的 action 拔掉
        elems[activeIndex].classList.remove('action');
        // 使下一個標題被點擊（加入 action）
        elems[nextIndex].classList.add('action');
    }
}

CSS：

.SwitchURL-small-link.action {
    border-bottom: 2px solid#AE96DA;
    color: #AE96DA;
    margin-right: 15px;
}
.SwitchURL-small-link.hide {
    display:none;
}