scroll - specify parent for .position() jquery? -

is possible specify parent .position()? i'm trying make smooth scrolling work towards anchor points inside scrollable div , can't use .offset() since uses document offset instead of parent.

my problem anchors nested inside other elements , need relative position of anchor towards scrollable div in order use scrolltop in animation correctly.

should write script check whether it's nested , add each parent element's position().top till scrollable div parent? or there easier way it?

if it's not yet possible, should propose feature request @ jquery? think proof useful others aswell having same sort of problem.

edit: here example of meant not being able use .offset(): http://codepen.io/anon/pen/rxgrnj click on few links , see how responds... example: home -> contact -> us. i'm should getting relative position top of main instead of document offset.

html:

<nav>   <ul>     <li><a href="#home">home</a></li>     <li><a href="#information">information</a></li>     <li>       <ul>         <li><a href="#contact">contact</a></li>         <li><a href="#about">about us</a></li>       </ul>     </li> </nav> <main>   <div class="page" id="home">     <h2>home</h2>     <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. ut ultrices mollis turpis, et accumsan felis feugiat eget. cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. donec ut nisl purus. duis erat justo, lacinia id luctus at, interdum sed metus. pellentesque elementum quis justo vitae luctus. in tempus vulputate cursus. fusce viverra rutrum lectus @ iaculis. praesent egestas metus vel mauris vehicula rutrum. morbi porttitor, lacus vitae sollicitudin fermentum, tortor nulla cursus mi, pretium imperdiet augue tellus vitae odio. sed id venenatis arcu. fusce pharetra dolor nibh, ut faucibus arcu accumsan et. fusce non nisl vitae arcu viverra varius ac ut mi. ut feugiat elit tortor, eget commodo lectus fringilla id. curabitur lorem metus, pulvinar quis massa in, consectetur malesuada mauris.</p>     <p>vestibulum tempor lorem eget accumsan blandit. integer tellus ex, malesuada ut mattis a, tristique vitae eros. donec ut pharetra dui. donec sit amet dapibus augue. nulla facilisi. integer faucibus convallis blandit. morbi lacinia lacus nec malesuada tempus. in ultrices, nisi nec malesuada elementum, eros felis maximus eros, eget iaculis ante metus ac diam. nunc venenatis luctus eros quis egestas. nam aliquam erat erat, in condimentum eros hendrerit at. pellentesque consequat nisi et pulvinar viverra. pellentesque sapien massa, imperdiet quis dignissim nec, ultrices id neque. proin iaculis ex enim, non fringilla quam efficitur id.</p>     <p>proin cursus metus ut lacus sagittis, sit amet varius tortor eleifend. in hac habitasse platea dictumst. in hac habitasse platea dictumst. morbi id nisi nisl. morbi turpis purus, consectetur et consectetur et, tristique eget nulla. class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. donec luctus, ante non rutrum congue, augue libero finibus nisl, quis semper libero neque quis purus. etiam et odio tincidunt, malesuada dui quis, venenatis ligula. pellentesque sagittis venenatis sapien, sed pharetra turpis consectetur sit amet. duis ligula dui, convallis in odio tempor, imperdiet pulvinar diam. maecenas nec ex nulla. nulla commodo felis eget efficitur porttitor. aliquam id imperdiet sem, id ullamcorper tellus. phasellus vel viverra ex. curabitur rutrum, metus mollis iaculis, magna libero fringilla eros, eget tempor lacus sapien non nulla. suspendisse sagittis vehicula metus ullamcorper tempus.</p>     <p>sed ultricies ullamcorper libero, quis pulvinar risus elementum at. praesent augue lacus, tempor vitae quam sed, scelerisque sollicitudin enim. integer id ex in odio pellentesque scelerisque et quis leo. aenean pretium aliquam bibendum. cras in commodo nunc. etiam quis vehicula mauris. sed eu rhoncus urna, et pharetra neque. donec fermentum orci dui. pellentesque dignissim pulvinar venenatis. cras posuere metus.</p>   </div>   <div class="whitespace"></div>   <div class="parent-page" id="information">     <h2>information</h2>     <div class="page" id="contact">       <h3>contact</h3>       <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. nunc sollicitudin, erat quis aliquet viverra, magna nunc convallis dolor, finibus scelerisque dolor risus eu sapien. pellentesque ac pulvinar odio. pellentesque tristique ipsum efficitur auctor aliquam. maecenas nunc nisl, condimentum et nulla sit amet, cursus dapibus felis. aliquam urna nunc, faucibus eget elit eget, fringilla mollis enim. cras id dolor nec velit laoreet vulputate. nullam @ egestas tellus, eu maximus elit. fusce vitae quam diam. duis hendrerit maximus eros volutpat. aenean auctor ligula sit amet nisl volutpat scelerisque. cras commodo sodales diam sed egestas.</p>       <p>suspendisse viverra massa enim vehicula congue. phasellus lorem justo, condimentum sit amet mauris non, accumsan tristique magna. nulla luctus, massa vel malesuada semper, diam ante convallis elit, et interdum lacus dolor @ quam. proin eget condimentum sem. vestibulum molestie dolor ex, @ dignissim lacus accumsan et. maecenas sed suscipit velit, nec efficitur sapien. proin @ risus velit. fusce sagittis maximus justo sed condimentum. in mollis placerat enim, facilisis justo venenatis at. sed vehicula eros eu sollicitudin viverra. nunc mi magna, consequat non tortor dignissim, luctus luctus lectus. nam aliquam imperdiet magna sit amet venenatis. morbi id odio lacus fringilla vehicula. donec pulvinar non sem viverra.</p>       <p>sed eget justo tortor venenatis suscipit. nulla facilisi. suspendisse et sagittis augue, in porta lacus. morbi venenatis lorem vitae neque feugiat mattis. nam ac lorem lacinia, semper nisl vitae, placerat arcu. pellentesque dictum ante et molestie congue. integer velit sollicitudin, ultrices dolor in, commodo sapien. integer @ viverra augue, in pretium tortor. donec lobortis sapien sit amet risus congue condimentum. sed ut convallis ante. maecenas eu iaculis ex, non aliquam orci. curabitur nisl mauris, sagittis ut est in, condimentum dictum leo. quisque et varius elit.</p>       <p>etiam facilisis rutrum neque. nullam libero sapien, laoreet ac pretium et, facilisis eu urna. in sem sapien, elementum purus in, ultrices faucibus purus. vivamus aliquam vitae ante vel placerat. donec mi massa, mollis interdum ut, lacinia et neque. curabitur ac odio ex. sed aliquam tellus lacus, nec porta nulla ultricies dictum. sed efficitur arcu sed diam vehicula, eget sagittis dui convallis. in eros metus, sollicitudin non gravida et, porttitor id nisi. fusce congue lorem nisl, eu consequat eros vehicula nec. aenean congue cursus lorem, eget commodo ligula placerat quis. donec odio lacus. donec quis massa arcu. vestibulum eu diam nulla.</p>       <p>donec ut elementum mi. ut interdum elit @ leo egestas, in varius lorem mollis. ut porttitor auctor nisl, in imperdiet nulla pellentesque a. etiam egestas quam nunc, vel sollicitudin lectus iaculis at. mauris ante nulla, tincidunt @ egestas efficitur, molestie sed felis. aliquam volutpat efficitur risus non ultrices. proin ut nisl eu est ultrices molestie. donec rhoncus, nulla vel pulvinar placerat, ex orci sagittis tortor, vel porttitor augue ipsum eget enim. fusce egestas consectetur lacus, vitae sagittis tortor bibendum sed. mauris neque gravida, blandit nisi quis, ultricies dolor. in hendrerit aliquet lectus non condimentum. praesent tincidunt sagittis lorem, et interdum lorem euismod quis.</p>     </div>     <div class="whitespace"></div>     <div class="page" id="about">       <h3>about us</h3>       <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. pellentesque sed felis non lectus commodo rutrum @ id arcu. sed malesuada ornare orci ac malesuada. cras fringilla felis quis euismod vestibulum. phasellus porttitor faucibus libero, nec aliquet risus ullamcorper finibus. quisque ut molestie sem, eget suscipit tortor. nullam gravida, ipsum eu pellentesque scelerisque, enim ex ultrices lorem, in ultricies felis lacus vitae ipsum. suspendisse varius felis nec erat placerat porttitor. donec placerat neque magna, ac mattis velit posuere quis. pellentesque dolor odio, lacinia non finibus ut, suscipit eget nibh. in sodales eu sem non dignissim. etiam et elit nec massa tempor cursus. vestibulum id aliquet nisl. ut ut egestas massa, id lobortis ex. curabitur accumsan odio vitae venenatis rhoncus.</p>       <p>ut sollicitudin erat ut risus pulvinar, eget laoreet mauris rhoncus. phasellus et elit ullamcorper, ornare odio in, rhoncus augue. nulla pharetra arcu in augue congue varius vel ac nulla. quisque sit amet viverra nisi, vel cursus magna. proin imperdiet, lectus et vehicula convallis, diam velit facilisis orci, vitae finibus purus augue id mauris. class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. phasellus luctus augue non augue tincidunt, id faucibus nunc facilisis.</p>       <p>donec risus elit, tincidunt venenatis felis non, ullamcorper porttitor ipsum. nam non mattis nulla, ac dictum ante. fusce mattis rhoncus euismod. nunc porta condimentum luctus. quisque semper dui purus, quis malesuada erat laoreet ut. donec eget pulvinar quam. vestibulum et efficitur quam. nulla ut nunc consequat, pulvinar dui nec, pulvinar enim. nulla et aliquam leo, sit amet lacinia ipsum. aenean vitae elit et turpis pretium pretium. ut sed imperdiet quam, sollicitudin erat. sed tincidunt pretium eros quis ultrices.</p> </main> 

css:

main {   position:relative;   width:500px;   height:300px;   margin-left:auto;   margin-right:auto;   overflow-y:scroll;   border:2px solid black;   padding:20px; }  main .whitespace {   height:300px; }  nav ul {   list-style:none; }  nav {   position:fixed; } 

javascript:

$(document).ready(function() {     $('a[href^="#"]').on('click',function (e) {         e.preventdefault();         var target = this.hash;         var $target = $(target);          $('main').stop().animate({             'scrolltop': $target.offset().top         }, 900, 'swing')         });     }); 

edit2: stupid of me, use .scrolltop() find scrolled position , add .offset().top. issue seems solved, shoud post answer aswell?

based on jquery documentation, parent() , parents() methods not accept parent in input parameters. not option. there other ways it.

the simplest , fastest way this:

$(document).ready(function() {    $(".linkscroll").click(function() {        $('.inside').animate({            scrolltop: $("a[href='#id1']").offset().top         }, 2000);    }); }); 

html markup looks this:

<div class="container">   <div class="inside">      <a class="linkscroll"> option 2: scroll here ... </a>      <div class="inside2">          <a href="#id1" >here ...</a>      </div>   </div> </div> 

a little bit of css follows:

.container {     height:800px;     width:100%;     background: #ccc; }  .inside {    position: absolute;    top: 300px;    height: 200px;    width:100%;    background: #666;    overflow-y: scroll; }  .inside2 {    position: absolute;    top: 350px;    height: 100px;    width:100%;    background: red; }  .inside2 {    position: absolute;    top:50px; } 

as can see, have outer div.container surrounds everything. have div.inside sits inside of mother div , has overflow-y: scroll;. inside of div, have div.inside 2 has anchor. idea scroll a.linkscroll innermost anchor, i.e., a[href="#id1"]. is, far understood, looking for. can check out working example here.

click on a.linkscroll inside of div.inside scroll down a[href="#id1"] animation.