jquery mouseover / mouseout to change scroll position -

i new jquery , struggling following:

from research have come quick jsfiddle. it's not quite working yet, achieve is:

i want 'link30' go top when mouseover 'div 1' (and 'link30' remain @ top on mouseout).

then want 'link50' go top when mouseover 'div 2' (and 'link50' remain @ top on mouseout).

i want mouseover divs number of times , still have relevant links go top of scrolling div each time.

at moment mouseover 'div 1' , 'link30' goes top when mouseover 'div 2' stays @ 'link30' rather moving 'link50' like.

hope makes sense. thanks.

here sample of code best seeing jsfiddle.

$( "div.overout1" )  .mouseover(function() { $( ).find( "span" ).text( "mouse on " ); $('a').filter(function(index) { return $(this).text() === 'link30';    }).addclass('on'); var offset = $('.on').offset().top - $('.links').scrolltop(); if(offset > window.innerheight)     {     $('.links').scrolltop(offset);     } })  .mouseout(function() { $( ).find( "span" ).text( "mouse out " ); $('a').filter(function(index) { return $(this).text() === 'link30'; }).removeclass('on'); });  $( "div.overout2" )  .mouseover(function() { $( ).find( "span" ).text( "mouse on " ); $('a').filter(function(index) { return $(this).text() === 'link50'; }).addclass('on'); var offset = $('.on').offset().top - $('.links').scrolltop(); if(offset > window.innerheight)     {     $('.links').scrolltop(offset);     } })  .mouseout(function() { $( ).find( "span" ).text( "mouse out " ); $('a').filter(function(index) { return $(this).text() === 'link50'; }).removeclass('on'); }); 

here's optimised version :

https://jsfiddle.net/fkhbcxzw/15/

linkscroll($('div.overout1'), 'link30'); linkscroll($('div.overout2'), 'link50');  function linkscroll(item, identify) {      var object;      item     .on('mouseenter touchstart', function() {          object = $(this).find('span');         object.text('mouseenter-touchstart');         $('a').removeclass('on').filter(function() {return $(this).text() === identify}).addclass('on');          var offset = $('.on').position().top;         var current = $('.links').scrolltop();         $('.links').scrolltop(current+offset);     })     .mouseleave(function() {          object.text('mouseleave');     }); } 

because single action needed on entering each div, it's better use mouseenter fires on parent. mouseover events keeps unnecessarily firing long you're hovering. added mobile support.