. animate scroll nested div

bimbles спросил: 14 ноября 2017 в 06:21 в: jquery

Я настраиваю сайт с параллаксом вложенных div и пытаюсь анимировать прокрутку для каждого div. Проблема, с которой я сталкиваюсь, заключается в том, что большинство .animate scrollto, которые я нахожу, полагаются на html, body, где, как мне кажется, возникла проблема, поскольку прокрутка происходит с родительский div и тело страницы. Я настроил скрипку, которая дает базовую схему сайта с помощью простых тегов привязки, которые ведут вас к следующему вложенному разделу / разделу. Я пытаюсь оживить прокрутку между каждым против прыжка к следующему якору. Может ли кто-нибудь указать мне правильное направление? Вот ссылка на скрипку

<html>
    <head>
        <script>
        function scrollToAnchor(group1) {
            var aTag = $("a[name='" + group1 + "']");
            $('parent-container').animate({
                scrollTop: aTag.offset().top
            }, 'slow');
        }
        $("#group1").click(function() {
            scrollToAnchor('#group2');
        });        function scrollToAnchor(group2) {
            var aTag = $("a[name='" + group2 + "']");
            $('parent-container').animate({
                scrollTop: aTag.offset().top
            }, 'slow');
        }
        $("#group2").click(function() {
            scrollToAnchor('#group3');
        });        function scrollToAnchor(group3) {
            var aTag = $("a[name='" + group3 + "']");
            $('parent-container').animate({
                scrollTop: aTag.offset().top
            }, 'slow');
        }
        $("#group3").click(function() {
            scrollToAnchor('#group4');
        });        function scrollToAnchor(group4) {
            var aTag = $("a[name='" + group4 + "']");
            $('parent-container').animate({
                scrollTop: aTag.offset().top
            }, 'slow');
        }
        $("#group4").click(function() {
            scrollToAnchor('#group1');
        });
        </script>
    </head>
    <body>
        <div id="parent-container" class="master-wrap"> // overflow:scroll, 100vh
            <div id="group1" class="wrap"> //100vh
                <h1>Some Title Here - box1</h1>
                <p>some content here.</p>
                <a href="#group2" class="next_button">&#8595;</a>
            </div>
            <div id="group2" class="wrap"> //100vh
                <h1>Some Title Here - box3</h1>
                <p>some content here</p>
                <a href="#group3" class="next_button">&darr;</a>
            </div>
            <div id="group3" class="wrap"> //100vh
                <a href="#group4" class="next_button">&darr;</a>
                <h1>Some Title Here - box3</h1>
                <p>some content here</p>
            </div>
            <div id="group4" class="wrap"> //100vh
                <h1>Some Title Here - box4</h1>
                <p>some content here</p>
                <a href="#group1" class="next_button">&#8593;</a>
            </div>
        </div>
    </body></html>

0 ответов