jquery - offset().top - (something) repeats -
i'm trying dynamically open tab bootstrap , smoothly scroll down @ same time. have functional, except offset().top-280 i'm using causes screen shift 280px every time it's touched. i'd scroll div on first button , afterward, stay put when clicking other handles.
thanks in advance.
here's html:
<ul id="tabs" class="join-options" data-tabs="tabs"> <li><a href="#donate" data-toggle="tab">donate</a></li> <li><a href="#join-new" data-toggle="tab">join</a></li> <li><a href="#renew" data-toggle="tab">renew</a></li> </ul>
those handles. content:
<div id="my-tab-content" class="tab-content"> <div class="tab-pane active" id="donate"> <h1>donate</h1> <p>donate donate donate donate donate donate</p> </div> <div class="tab-pane" id="join-new"> <h1>join</h1> <p>join join join join join</p> </div> <div class="tab-pane" id="renew"> <h1>renew</h1> <p>renew renew renew renew renew</p> </div> </div>
and javascript:
<script type="text/javascript"> jquery(document).ready(function ($) { $('#tabs').tab(); $('.join-options a').bind('click', function(event) { var $anchor = $(this); $('html, body').stop().animate({ scrolltop: ($($anchor.attr('href')).offset().top-280) }, 1500, 'easeinoutexpo'); event.preventdefault(); }); }); </script>
not sure it, set variable when page scrolls first time, , remove scrolling on subsequent clicks etc ?
jquery(document).ready(function ($) { var touched = false; $('#tabs').tab(); $('.join-options a').on('click', function(event) { event.preventdefault(); if (!touched) { var $anchor = $(this); $('html, body').stop().animate({ scrolltop: ($($anchor.attr('href')).offset().top-280) }, 1500, 'easeinoutexpo'); } touched = true; }); });
Comments
Post a Comment