Automatic scroll To element on a list when open this

Question

) ,

I explain my little problem ( sorry for my english):

I have a list of element (div) in left ( constraint in size) with a scrollbar (auto) (a custom scroll but it's the same problem with the basic scroll).

All of this "element" can be open (with a "+" button) that open a "sub element" IN the list.

Problem , by example if you open the last element you can't see the sub element without scroll to this sub element, i would like add a js for scrolling to this open sub-element"

I explain with image what i would like have: http://www.nanosix.be/test/help.jpg

and i make a simply version on jsfiddle here : 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>

http://stackoverflow.com/questions/6677035/jquery-scroll-to-element — Paul Abbott, May 02 '16 at 15:30
I can see sub element after clicking on `+` sign and scroll appears fine. Could you please explain your problem in detail? — AbhiNickz, May 02 '16 at 15:30
i see the sub element that's not the problem , the problem is : i need automaticly scroll to this "open" element, if this element isn't visible ( by example : because user open the last element , so the sub element is out of the screen , so i need an automatic scroll to — Jori Dupont, May 02 '16 at 15:32
if you click on the last + in the list you dont see the last sub element without scroll with your mouse/finger , i would like an automatic scroll to this sub element — Jori Dupont, May 02 '16 at 15:33
How far do you want to scroll? What if the opened element has more than one full screen of items? Do you want to scroll so that the last one is visible in its entirety (in that case the top one will scroll out of view up)? — G. Stoynev, May 02 '16 at 15:36
last one but i try this : https://jsfiddle.net/9Lrhfqmk/7/ but not functional after 5-6 element ( scroll go to top and not to bottom ) — Jori Dupont, May 10 '16 at 14:36

rmacnell · Answer 1 · 2016-05-02T18:41:30.053

0

Here is the updated fiddle: https://jsfiddle.net/9Lrhfqmk/2/

You have to do something like this:

$( ".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);
    }
});

edited May 02 '16 at 18:41

answered May 02 '16 at 15:38

rmacnell

11
4

nice !!! :D but not perfect because when i close the sub element ( new click on + ) the scroll go to top of the list ... ( if the list is big that a problem for re-find the parent element ), when i close the scroll need rest to the parent element – Jori Dupont May 02 '16 at 15:44
i updated my answer. in the case the element was collapsed it scrolls to "parent" instead of "other" – rmacnell May 02 '16 at 18:42
Men , your are so beautifull :D, thank a lot for this fast answer , ( this one of the two last request from the customer so you really help me ) thk a lot, Dupont Jori – Jori Dupont May 03 '16 at 07:35
ok sorry men :D , but if the list has more then 16 element , that's not functional ....see : https://jsfiddle.net/9Lrhfqmk/3/ after x element if yotu try to open the last ,it's dont scroll to the open element ... – Jori Dupont May 10 '16 at 12:25

Automatic scroll To element on a list when open this

1 Answers1