打开此列表时自动滚动到列表中的元素答案

【问题标题】：Automatic scroll To element on a list when open this打开此列表时自动滚动到列表中的元素
【发布时间】：2016-05-02 15:27:14
【问题描述】：

) ,

我解释一下我的小问题（对不起我的英语）：

我在左侧有一个元素 (div) 列表（大小约束），带有滚动条（自动） （自定义滚动，但与基本滚动相同的问题）。

所有这些“元素”都可以打开（使用“+”按钮）在列表中打开一个“子元素”。

问题，例如，如果你打开最后一个元素，如果不滚动到这个子元素，你就看不到子元素，我想添加一个 js 来滚动到这个打开的子元素”

我用图片解释我想要什么：http://www.nanosix.be/test/help.jpg

我在 jsfiddle 上做了一个简单的版本： https://jsfiddle.net/9Lrhfqmk/

<body>

  <div class="menu">
    <div class="ele">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia commodi, quia sint vitae, praesentium beatae, facere vel nisi corporis explicabo temporibus. Laboriosam, blanditiis sint accusantium rem, voluptatibus repellendus amet iste.
      <div class="button">+</div>
      <div class="other">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur soluta officia, numquam esse nostrum, in tempora alias enim corrupti aliquam, a eius asperiores voluptatem beatae iusto architecto cumque quas ipsum.</div>
    </div>

    <div class="ele">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia commodi, quia sint vitae, praesentium beatae, facere vel nisi corporis explicabo temporibus. Laboriosam, blanditiis sint accusantium rem, voluptatibus repellendus amet iste.
      <div class="button">+</div>
      <div class="other">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur soluta officia, numquam esse nostrum, in tempora alias enim corrupti aliquam, a eius asperiores voluptatem beatae iusto architecto cumque quas ipsum.</div>
    </div>

    <div class="ele">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia commodi, quia sint vitae, praesentium beatae, facere vel nisi corporis explicabo temporibus. Laboriosam, blanditiis sint accusantium rem, voluptatibus repellendus amet iste.
      <div class="button">+</div>
      <div class="other">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur soluta officia, numquam esse nostrum, in tempora alias enim corrupti aliquam, a eius asperiores voluptatem beatae iusto architecto cumque quas ipsum.</div>
    </div>

    <div class="ele">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia commodi, quia sint vitae, praesentium beatae, facere vel nisi corporis explicabo temporibus. Laboriosam, blanditiis sint accusantium rem, voluptatibus repellendus amet iste.
      <div class="button">+</div>
      <div class="other">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur soluta officia, numquam esse nostrum, in tempora alias enim corrupti aliquam, a eius asperiores voluptatem beatae iusto architecto cumque quas ipsum.</div>
    </div>

    <div class="ele">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia commodi, quia sint vitae, praesentium beatae, facere vel nisi corporis explicabo temporibus. Laboriosam, blanditiis sint accusantium rem, voluptatibus repellendus amet iste.
      <div class="button">+</div>
      <div class="other">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur soluta officia, numquam esse nostrum, in tempora alias enim corrupti aliquam, a eius asperiores voluptatem beatae iusto architecto cumque quas ipsum.</div>
    </div>

    <div class="ele">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia commodi, quia sint vitae, praesentium beatae, facere vel nisi corporis explicabo temporibus. Laboriosam, blanditiis sint accusantium rem, voluptatibus repellendus amet iste.
      <div class="button">+</div>
      <div class="other">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur soluta officia, numquam esse nostrum, in tempora alias enim corrupti aliquam, a eius asperiores voluptatem beatae iusto architecto cumque quas ipsum.</div>
    </div>

  </div>

  <script>
    $(".button").click(function() {
      $(this).parent(".ele").children(".other").toggleClass("displayblock");
    });

  </script>

</body>

【问题讨论】：

stackoverflow.com/questions/6677035/jquery-scroll-to-element
我可以在点击+ 标志后看到子元素，并且滚动看起来很好。你能详细解释一下你的问题吗？
我看到子元素不是问题，问题是：如果这个元素不可见，我需要自动滚动到这个“打开”元素（例如：因为用户打开了最后一个元素，所以子元素不在屏幕上，所以我需要自动滚动到
如果您单击列表中的最后一个 +，您不会看到最后一个子元素，而无需使用鼠标/手指滚动，我希望自动滚动到该子元素
你想滚动多远？如果打开的元素有多个全屏项目怎么办？是否要滚动以使最后一个完全可见（在这种情况下，顶部的一个将向上滚动到视图之外）？

标签： javascript jquery css scroll

【解决方案1】：

这是更新后的小提琴：https://jsfiddle.net/9Lrhfqmk/2/

你必须这样做：

$( ".button" ).click(function() {
    var parent = $(this).parent(".ele");
    var other = parent.children(".other");
    other.toggleClass("displayblock");
    if(other.hasClass("displayblock")){
        $(".menu").scrollTop(other.offset().top);
    }
    else{
        $(".menu").scrollTop(parent.offset().top);
    }
});

【讨论】：

不错！！！ :D 但并不完美，因为当我关闭子元素（新点击 +）时，滚动到列表顶部...（如果列表很大，则重新查找父元素有问题），当我关闭时滚动需要停留在父元素上
我更新了我的答案。如果元素被折叠，它会滚动到“父”而不是“其他”
男士们，你太漂亮了 :D，非常感谢你的快速回答，（这是客户最后的两个请求之一，所以你真的帮助了我）非常感谢，Dupont Jori跨度>
好吧对不起男人：D，但如果列表有超过 16 个元素，那将不起作用....请参阅：jsfiddle.net/9Lrhfqmk/3 在 x 元素之后如果 yotu 尝试打开最后一个，它不会滚动到开放元素...