Javascript / jQuery Прокрутка дочернего элемента вверх по родительскому элементу несовместима

У меня есть проблема, когда у меня есть 6 разделов внутри div, у меня есть навигация сбоку, где при нажатии каждой ссылки следует прокручивать соответствующий раздел в верхнюю часть div, чтобы он был в поле зрения.

Однако при нажатии для прокрутки к каждому из них я обнаружил несколько вещей:

1. Нажатие на предыдущий div, когда прокручивается дальше вниз, например щелкнув 3 при просмотре 6, вы полностью вернетесь к 1
2. Нажатие 2 работает нормально, нажатие 3 не работает
3. Нажатие 4 прокручивает вас до 3, нажатие 5 ничего не делает
4. Нажав 6, вы перейдете к 4

Я могу добавить, что они также могут вручную прокручивать родительский div вместо использования навигации, поэтому ему нужно будет знать, находится ли он выше или ниже div, как я предполагаю.

Ниже приведен HTML-код (я удалил дни 4-6, поскольку это буквально один и тот же код с увеличенным идентификатором для каждого из них).

    <div class = "display-agenda">
        <div class = "agenda-inner">
            <div class = "agenda-nav">
                <ul>
                    <li><a href = "#" title = "Day 1" rel = "Day1">Day 1</a></li>
                    <li><a href = "#" title = "Day 2" rel = "Day2">Day 2</a></li>
                    <li><a href = "#" title = "Day 3" rel = "Day3">Day 3</a></li>
                    <li><a href = "#" title = "Day 4" rel = "Day4">Day 4</a></li>
                    <li><a href = "#" title = "Day 5" rel = "Day5">Day 5</a></li>
                    <li><a href = "#" title = "Day 6" rel = "Day6">Day 6</a></li>
                </ul>
            </div>  
            <div class = "agenda-body">
                <section id = "Day1">
                    <div class = "agenda-content">
                        <p class = "day-text">Day 1</p>
                        <div class = "agenda-section">
                            <p class = "agenda-time">09:00</p>
                            <p class = "agenda-title">Title of Agenda Event</p>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                        </div>
                        <div class = "agenda-section">
                            <p class = "agenda-time">11:00</p>
                            <p class = "agenda-title">Title of Agenda Event</p>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                        </div>
                    </div>
                </section>
                <section id = "Day2">
                    <div class = "agenda-content">
                        <p class = "day-text">Day 2</p>
                        <div class = "agenda-section">
                            <p class = "agenda-time">09:00</p>
                            <p class = "agenda-title">Title of Agenda Event</p>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                        </div>
                        <div class = "agenda-section">
                            <p class = "agenda-time">11:00</p>
                            <p class = "agenda-title">Title of Agenda Event</p>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                        </div>
                    </div>
                </section>
                <section id = "Day3">
                    <div class = "agenda-content">
                        <p class = "day-text">Day 3</p>
                        <div class = "agenda-section">
                            <p class = "agenda-time">09:00</p>
                            <p class = "agenda-title">Title of Agenda Event</p>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                        </div>
                        <div class = "agenda-section">
                            <p class = "agenda-time">11:00</p>
                            <p class = "agenda-title">Title of Agenda Event</p>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                        </div>
                    </div>
                </section>
            </div>
        </div>
    </div>

И пожалуйста, найдите код jQuery / JS ниже:

    jQuery(document).ready(function($){
        var agendaNav = $('.display-agenda .agenda-inner .agenda-nav ul li a');
        var agendaContent = $('.display-agenda .agenda-inner .agenda-body');

        $(agendaNav).on('click', function(e){
            e.preventDefault();
            var dayLink = $(this).attr('rel'); console.info(dayLink);
            agendaContent.animate({scrollTop:$('#'+dayLink).position().top}, 'slow');
        });
    });