Question

我正在设置一个包含parallaxing嵌套div的网站，我正在尝试将滚动设置为每个div的动画。我遇到的问题是，我发现的大多数.animate scrollto都依赖html，body这是我认为我遇到问题的地方，因为滚动发生在父div上1}}与页面正文相对应。我已经设置了一个小提琴，它给出了网站的基本轮廓，其中包含简单的锚标记，可以将您带到下一个嵌套的div / section。我试图动画每个人之间的滚动与跳到下一个锚。有人能指出我正确的方向吗？ Here is the fiddle link

<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>

Answer 1

我会做一个更通用的解决方案，你可以使用data属性来指示在点击元素时应该滚动到哪个元素。

例如，<div data-scroll-to="other-element">···</div>会滚动到ID为other-element的元素。有关工作示例，请参阅以下内容：

$('[data-scroll-to]').on('click', function(event) {
  var target = $("#" + $(event.target).data('scroll-to'))
  var offset = target.offset().top
  $('html, body').animate({
    scrollTop: offset
  }, 'slow')

})

.box {
  height: 200px;
  background-color: rgb(200, 200, 200);
}

.box:nth-child(even) {
  background-color: rgb(150, 150, 150);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box1" data-scroll-to="box2" class="box">
  Box 1 > Box 2
</div>

<div id="box2" data-scroll-to="box3" class="box">
  Box 2 > Box 3
</div>

<div id="box3" data-scroll-to="box1" class="box">
  Box 3 > Box 1
</div>

Answer 2

这解决了我的问题：

$( function () {
            $( 'a[href*=#]:not([href=#])' ).click( function () {
                if ( location.pathname.replace( /^\//, '' ) == this.pathname.replace( /^\//, '' ) && location.hostname == this.hostname ) {
                    var target = $( this.hash );
                    target = target.length ? target : $( '[name=' + this.hash.slice( 1 ) + ']' );
                    if ( target.length ) {
                        $( '.parallax' ).animate( {
                            scrollTop: $( '.parallax' ).scrollTop() + target.offset().top
                        }, 1500 );
                        return false;
                    }
                }
            } );
        } );

.animate滚动嵌套div

2 个答案: