js实现下一个<hr>的切换

网页中有无数个<hr>（也就是横线），
每个<hr>之间是数量不等的网页内容，
我想在页面右侧有两个悬停的按钮，
每点一下，
就自动跳转到下一个<hr>，
或者上一个<hr>。
这个js该怎么写呢？

    function next(){
        var hrList = document.getElementsByTagName('hr')
        var scrollTop = document.documentElement.scrollTop
        for (let i = 0; i < hrList.length; i++) {
            if(hrList[i].offsetTop > scrollTop){
                document.documentElement.scrollTop = hrList[i].offsetTop
                break;
            }
        }
    }
    function last(){
        var hrList = document.getElementsByTagName('hr')
        var scrollTop = document.documentElement.scrollTop
        var lastOffset = 0
        for (let i = 0; i < hrList.length; i++) {
            if(hrList[i].offsetTop >= scrollTop){
                document.documentElement.scrollTop = lastOffset
                break;
            }
            lastOffset = hrList[i].offsetTop
        }
    }

使用a标签锚链接

https://blog.csdn.net/Thedemonsword/article/details/124211438

锚点