javascript - scrollLeft: to END OF MAIN DIV not offset().left -

i have problem following сode.

       <script type="text/javascript">         $(function() {             $('ul.nav a').bind('click',function(event){                 var $anchor = $(this);                 /*                 if want use 1 of easing effects:                 $('html, body').stop().animate({                     scrollleft: $($anchor.attr('href')).offset().left                 }, 1500,'easeinoutexpo');                  */                 $('html, body').stop().animate({                     scrollleft: $($anchor.attr('href')).offset().left                 }, 1000);                 event.preventdefault();             });         });     </script> 

my aim click on 1 of nav links (see screenshot). should scroll vertical red line (main div class "#incontent"). here "home" link scrolls end of site. (see screenshot on left hand side)

http://i.stack.imgur.com/7yxkv.jpg

Сan me? can't find solutions. have low js skillsю

edit: code now:

hi, thank quick response!

i tried solution still not works. put <script src="http://code.jquery.com/jquery-1.9.1.js"></script> inside

may write whole code here. besides i'm working joomla.

the php index file:

<div id="content"> <div id="incontent" class="test"> <div id="breadcrumbs"> <jdoc:include type="modules" name="breadcrumbs" style="xhtml"> </div>            <jdoc:include type="message" />     <jdoc:include type="component" /> </div> </div>    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>         <script type="text/javascript">          $(function() {      var winwidth = $(window).width(),          containerwidth = $('.test').width(),          leftoff = (winwidth - containerwidth)/2;      $('ul.nav a').on('click',function(event){         var $anchor = $(this);          $('html, body').stop().animate({             scrollleft: $($anchor.attr('href')).offset().left - leftoff         }, 1000);         event.preventdefault();     });     }); </script> 

css

#incontent{ font-family: 'raleway', sans-serif; padding-top: 170px; width: 6000px; font-size: 12px; font-weight: lighter; line-height: 17px; }  .items-row{ margin-left: 0px !important; width:840px; float: left; background-color: #e5e5e5; padding: 20px; margin: 10px; margin-top:; border: 1px dashed #cfcfcf; outline: 2px solid #e5e5e5; min-height: 320px; } 

joomla wysiwyg:

<table border="0"> <tbody> <tr> <td class="kat"> <div id="buttons"> <ul class="nav"> <li><a href="#home">home</a></li> | <li><a href="#ueberuns">Über uns</a></li> </ul> </div>  </td> </tr> <tr> <td>  <p><img src="images/fotolia_38533929.jpg" border="0" width="300" height="215"    style="float: right; margin-left: 10px; margin-right: 10px;" /></p>  <div id="home" class="ultimativ"> </div>  <h2>herzlich willkommen!</h2>   <p>haben sie schon länger keine familienfotos mehr gemacht oder wollen sie gerne schöne fotos von sich dem schönsten ort ihrer stadt machen? durch jahrelanger erfahrung ist eine vielzahl fotoshootings durch unsere kameralinsen gewandert und hat vielen freude bereitet, egal ob studiofotos, fotos für ihre hochzeitseinladungskarten oder ein außergewöhnliches bewerbungsfoto. klicken sie sich durch unsere verschiedenen bereiche und machen sie sich ein bild davon, wie auch ihre bilder aussehen könnten.</p> </td> </tr> </tbody> </table> 

i think problem css "width 6000px" cause need horizontal space joomla putting blog post inside. dont know how else can solve this.

---

i still have bug here.

xxx

on index page there 2 divs

on print page there 3 divs xxx

i set width 6000px can add more blog post automatically display inline.

but heres bug, if have 6000px everywhere can scroll right side, blogpost go away.

i hope understand.

i need still problem!

not sure htlm/css should logic @ least.

 $(function() {      var winwidth = $(window).width(),          containerwidth = $('.container').width(),          leftoff = (winwidth - containerwidth)/2;      $('ul.nav a').on('click',function(event){         var $anchor = $(this);          $('html, body').stop().animate({             scrollleft: $($anchor.attr('href')).offset().left - leftoff         }, 1000);         event.preventdefault();     }); }); 

i'm getting window width , container width , subtracting them (to spaces left , right of container) , dividing them 2 1 space.

so since know width of left space substract offset().left of div $($anchor.attr('href')).offset().left - leftoff d this:

demo