[Vlasenko Fedor]

<style>
    #x {
        width: 200px;
        height: 200px;
        overflow: scroll;
        overflow-x: hidden;
        margin-top: 20px;
    }

    .control {
        position: fixed;
        top: 0;
        right: 0;
    }

</style>
<div id="x">
    <a name="1"></a><b>1</b> text text text text text text text text text text text text text text text text text
    text text text text text text text text text text text text text text text text text text text text text text text
    text text text text text text text text
    text text text text text text text text text text text text text text text text text text text text text text text
    text text text text text text text text text text text text text text text text text text text text text text text
    text text text text
    text
    <a name="2"></a><b>2</b> text text text text text text text text text text text text text text text text text
    text text text text text text text text text text text text text text text text text text text text text text text
    text text text text text text text text
    text text text text text text text text text text text text text text text text text text text text text text text
    text text text text text text text text text text text text text text text text text text text text text text text
    text text text text
    text
    <a name="3"></a><b>3</b> text text text text text text text text text text text text text text text text text
    text text text text text text text text text text text text text text text text text text text text text text text
    text text text text text text text text
    text text text text text text text text text text text text text text text text text text text text text text text
    text text text text text text text text text text text text text text text text text text text text text text text
    text text text text
    text text text text text text text text text text text t
    <a name="4"></a><b>4</b> text text text text text text text text text text text text text text text text text
    text text text text text text text text text text text text text text text text text text text text text text text
    text text text text text text text text text
    text text text text text text
</div>
<div class="control">
    <a id="prev" href="#">Назад</a>
    <a id="next" href="#">Вперед</a>
</div>
<script>
    window.onload = function () {
        function nav(arr) {
            var current = 0,
                    len = arr.length - 1;
            this.next = function () {
                current = current < len ? current + 1 : 0;
                return arr[current];
            };
            this.prev = function () {
                current = current > 0 ? current - 1 : len;
                return arr[current];
            };
        }

        var links = document.querySelectorAll('#x a[name]'),
                a = document.createElement('a'),
                control = new nav(links);
        prev.onclick = function () {
            a.href = '#' + control.prev().name;
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
            return false;
        };
        next.onclick = function () {
            a.href = '#' + control.next().name;
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
            return false;
        };
    }
</script>