0

I would like to know if there is anyway in JQuery to scroll to elements that are inside different divs. For example, if I go to example.com/programme#event-2, div on the left should scroll to element id="event-2", and div on the right should scroll to element id="event-2". Here's my HTML:

<div id="events">
    <div id="event-list">
        <div class="content">
            <h2>Vendredi 17 octobre</h2>
            <ul id="event-1" class="event-title">
                list items
            </ul>
            <h2>Vendredi 21 octobre</h2>
            <ul id="event-2" class="event-title">
                list-items
            </ul>
        </div>
    </div>

    <div id="event-details">
        <div class="content">
            <section id="event-1" class="details">
                stuff
            </section>

            <section id="event-2" class="details">
                stuff
            </section>
        </div>
    </div>
</div>

You can have a look at this Codepen, it will help visualize my problem. Thank you!

acanana
  • 51
  • 7
  • These articles on SO may help :) [jQuery scroll To Element](http://stackoverflow.com/questions/6677035/jquery-scroll-to-element), [Trigger event when user scroll to specific element - with jQuery](http://stackoverflow.com/questions/21561480/trigger-event-when-user-scroll-to-specific-element-with-jquery) – BobbyDazzler Apr 22 '15 at 15:27
  • Thank you! First article you mentioned had the solution. Added jquery instruction to the codepen if anyone's interested. – acanana Apr 22 '15 at 15:54

1 Answers1

0

here is link to example : CODEPEN

First of all IMPORTANT

Id can be use only once and u use it like class #event-1 etc

second I create button for first columns, red "scroll"

$(function(){
  var thisOffset = $("#event-5").offset().top; // get element top offset 


  $(".scroll").on("click", function(e){
    console.log("scroll")
     $("#event-list .content").animate({  //scroll to specific offset on click 
       scrollTop: thisOffset
     }, 1000)
     e.preventDefault();
  });
});
Mind
  • 1
  • Yes, I know that id's are for one element only, that's just how I started. I'm going to change to classes. Thanks for the reminder. – acanana Apr 22 '15 at 16:05
  • There is something weird happening with your code (and mine). When changing `var thisOffset = $("#event-5").offset().top;` to `var thisOffset = $("#event-2").offset().top;`, and `$("#event-list .content").animate({` to `$("#event-details .content").animate({`, the scrolling stops before reaching the element on the second column. Any idea why? – acanana Apr 22 '15 at 16:43