CODEWITHSUNDEEP
jqueryhtmlscroll
London804
London804

Reputation: 1126

How can I make another div scroll to my current div on click

Have a column of images each underneath one another. I also have a div to the right of that column that have several notes(basically paragraphs). When you click each image a set of new notes appear. Ideally as you scroll down the page and click each image I would like the div on the right to scroll down and match up with each image that is click. I wrote a function but I can only make the entire page scroll to the top but what I need is the opposite. I'm using scrollTop: which is causing the problem I think but there isn't a scrollTo function? Here is my code.

HTML 

<div id='main'>
 ...content...
</div>

 <div id='rightnav'>
 ...content...
 </div>

jQuery 

$('html, #rightnav').animate({
     scrollTop: $($current_image).offset().top
}, 2000);

Upvotes: 1

Views: 335

Answers (1)

Yuriy Galanter
Yuriy Galanter

Reputation: 39807

You need to apply .animate() just to the nav DIV itself. And animate just the "top" style. For example this code:

$('#main img').click(function() {

    $('#rightnav').animate({top: $(this).offset().top}, 2000)

})

will bring DIV with ID = "rightnav" to the same top coordinates as image clicked inside of "main" DIV.

Demo: http://jsfiddle.net/vSfP9/1/

Upvotes: 1

Related Questions