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

offset（）。top - （某事）重复

1 个答案: