Question

我的顺畅滚动无法正确执行。我有几个标签menys，其中包含内容，当我点击tab0时，我希望平滑滚动向下滚动到conent区域。我有几个区域。但是第一次点击没有任何反应，但第二次点击时scoll会执行。数据切换也搞砸了。它失去了对active类的选项卡的跟踪。我正在使用Bootstraps data-toggle在标签内容之间切换。标签和平滑滚动显然不会共存。我已经对这个问题喋喋不休了一段时间。我究竟做错了什么？这是我的代码。

JS代码

  $(document).ready(function(){

  $(".tabs a").on('click', function(event) {

    // Make sure this.hash has a value before overriding default behavior
    if (this.hash !== "") {

      event.preventDefault();

      var hash = this.hash;

      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 1000, function(){

        window.location.hash = hash;
      });
    } 
  });
});

HTML code：标签链接

    <div class="tabs">
        <ul id="myTabContent" class="nav nav-tabs">
            <li class="active"><a href="#Hem" data-toggle="tab">Hem</a></li>
            <li class=""><a href="#Historia" data-toggle="tab">Historia</a></li>
            <li class=""><a  href="#Ridlärarna" data-toggle="tab">Ridlärare</a></li>

            <!--<li class=""><a href="#tab5" data-toggle="tab">Avbokning och igenridning</a></li>-->
        </ul>

HTML code：tab-content

<div id="myTabContent" class="tab-content">

                        <div class="tab-pane fade active in" id="Hem">
                            <div class="media">

                                <div class="media-body">
                                    <h1 class="media-heading ruler-bottom">Hem</h1>
                                    <p class="diffrentFont">Text...</p>
                                                            </div>
                            </div>
                    </div>

                    <div class="tab-pane fade" id="Historia">
                        <div class="media">
                            <img src="images/firstpage.jpg" class="spacing-r imgRadius ResponsiveImgWidth" alt="">
                            <div class="media-body">
                                <h1 class="media-heading ruler-bottom">Historia</h1>
                                <p class="diffrentFont">Text...</p>

                            </div>
                        </div>

                    </div>
                    <div class="tab-pane fade" id="Ridlärarna">
                        <div class="media">
                            <img src="images/Ridlärare/Sample.jpg" class="spacing-r imgRadius customlärare" alt="">
                            <img src="images/Ridlärare/Sample.jpg" class="spacing-r imgRadius customlärare" alt="">
                            <div class="media-body">
                                <h1 class="media-heading ruler-bottom">Ridlärare</h1>
                                <p class="diffrentFont">Text...</p>

                            </div>
                        </div>
                    </div>

使用数据切换在第二次单击时平滑滚动

0 个答案: