jquery - scrollTop inside position Fixed -
i facing issue need use scrolltop inside div thats position fixed , overflow-y. did see post using scrolltop inside of fixed element overflow-y:scroll
the issue have is, error element have scroll positioned inside content relative positioned. code not work
my fiddle http://jsfiddle.net/5446a6ds/2/
if remove parent relative positioning, works, cannot that. error may positioned anywhere within content relatively positioned., scrolling content not option.
html
<div id="relativedad"> <div id="containerparent"> <div id="containerchild"> <section id="content"> form<br> form<br> form<br> form<br> form<br> form<br> form<br> form<br> form<br> form<br> form<br> form<br> form<br> form<br> <p class="form-error-msg"> please provide missing information in fields highlighted below.</p> form<br> form<br> form<br> form<br> form<br> form<br> form<br> form<br> form<br> form<br> form<br> form<br> form<br> form<br> form<br> form<br> form<br> form<br> form<br> form<br> form<br> form<br> form<br> <fieldset> <input type="date" id="dateofbirth" required=""> <input type="password"> </fieldset> <button id="button1">button</button> </section> </div> </div> </div> javascript $("#button1").on("click", function(){ var position = $(".form-error-msg").position().top + $("#containerchild").scrolltop(); $("#containerchild").animate({scrolltop: position}); }); css #relativedad { position: relative; overflow: hidden; } #containerparent { position: fixed; background-color:blue; height: 100%; border:1px solid red; width: 100%; } #containerchild { position: fixed; overflow-y: scroll; height: 100%; } #content { position:relative; }
you're adding position. having
var position = $(".form-error-msg").position().top;
is sufficient because .position relative offset parent you're scrolling within #containerchild
here's updated fiddle. i've added paragraph before , changed height 80% demonstrate relative calculation.
Comments
Post a Comment