offset（）。top - （something）repeat

Question

我試圖用Bootstrap動態打開一個選項卡，並在同一時間平滑地向下滾動。除了我使用的offset（）。top-280，每次觸摸屏幕都會將屏幕向上移動280px，除此之外，我主要使用它。我想滾動到第一個按鈕上的div，然後在單擊其他手柄時保持放置。

在此先感謝。

這裏的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> 

這些都是手柄。現在內容：

<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> 

而且現在的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> 

Answer 1

不知道我得到它，但你可以只設置在頁面滾動的第一時間的變量，並刪除在後續滾動點擊等？

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