元生jsはサイドナビゲーションのスクロールモニターを実現します.

jsコードの部分は以下の通りです.1.スクロールバーを監督し、一定の距離をスクロールすると、トップボタンに戻り、該当するガイドliのポップアップをスクロールします.

    var allDiv = document.querySelectorAll("#wrap div");
    var allNavLi = document.querySelectorAll("#nav li");
    function toTopIcon() {
        window.onscroll = function () {
            var d = document.documentElement.scrollTop || document.body.scrollTop;//       
            var viewd = document.documentElement.clientHeight;//       
            var toTop = document.querySelector("#toTop");//      
            if (d > viewd) {
                toTop.className = "on";
            } else {
                toTop.className = "";
            }
            for (var i = 0; i < allDiv.length; i++) {
                allDiv[i].index = i;
                if (d >= allDiv[i].offsetTop && d < allDiv[i].offsetTop + 500) {
                    for (var j = 0; j < allDiv.length; j++) {
                        allNavLi[j].className = "";
                        allNavLi[i].className = "on";
                    }
                }
            }
        }
    }

2.ナビゲーションをクリックして、ページが対応するdiv位置(滑らかなスクロール)scrollToにジャンプします.デフォルトでは瞬間的に座標位置にスクロールし、behavior属性をsmbothに設定すればスムーズなスクロールがサポートされますが、欠点はスクロールレートを設定できないことです.

        for (var i = 0; i < allNavLi.length; i++){
            allNavLi[i].index = i;
            allNavLi[i].onclick = function () {
                for (var j = 0; j < allNavLi.length; j++){
                    window.scrollTo({
                        top:allDiv[this.index].offsetTop,
                        behavior:"smooth"
                    });
                }
            }
        }

3.ボタンを押してトップに戻る(タイマーが滑らかにスクロールする)

        var toTop = document.querySelector("#toTop");
        toTop.onclick = function() {
            var timer = setInterval(toTop,10);
            function toTop() {
                var d = document.documentElement.scrollTop || document.body.scrollTop;
                d -= 80;
                if(d > 0){
                    window.scrollTo(0,d);
                }else {
                    window.scrollTo(0,0);
                    clearInterval(timer);
                    for (var i = 0; i < allNavLi.length; i++){
                        allNavLi[i].index = i;
                        for (var j = 0; j < allNavLi.length; j++){
                            allNavLi[j].className = "";
                            allNavLi[0].className = "on";
                        }
                    }
                }
            }
        }