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;     }); });