Jquery 在按钮上使用引导数据间谍和数据切换

有没有办法让按钮不仅切换隐藏的手风琴，而且让页面滚动到该部分？这是我目前掌握的代码。我的导航工作得很好，我想知道我错过了什么让那个按钮显示文本并滚动到它的顶部

多谢各位

这是一个有我用的所有东西的。我想知道我是否能得到一些帮助

和我的HTML标记

<nav class="navbar navbar-fixed-top" data-spy="scroll">
  <div class="container-fluid">
      <div class="row">
      <div class="navbar-header">
        <a class="navbar-brand col-lg-12 col-md-12 col-sm-12 col-xs-6" href="#top"><img src="/img/logo.png" class="img-responsive" alt="Rhino Group Logo"></a>
        <div class="col-xs-1 col-xs-offset-1 visible-xs phoneIcon text-center"><a href="#"><i class="fa fa-phone"></i></a></div>
        <button type="button" data-toggle="collapse" data-target="#navigation-bar" class="navbar-toggle collapsed col-xs-2">
          <span class="sr-only"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
      </div>
      <div class="collapse navbar-collapse top-pull-right" id="navigation-bar">
        <ul class="nav navbar-nav">
          <li class="caps"><a href="#Services">services</a></li>
          <li class="caps"><a href="#Portfolio">portfolio</a></li>
          <li class="caps"><a href="#Contact">contact</a></li>
        </ul>
      </div>
    </div>
  </div>
</nav>

<div class="about-background">
<section class="about"> <!-- begin about -->
  <div class="container-fluid">
    <div class="row" data-spy="scroll">
      <h1 class="slogan text-center">The <span class="red">POWER</span> of the <span class="blue">WEB</span></h1>
      <p class="text-center col-md-6 col-md-offset-3 col-xs-10 col-xs-offset-1  ">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

      <button class="read-more text-center col-md-4 col-md-offset-4 col-sm-10 col-sm-offset-1 col-xs-10 col-xs-offset-1" type="button" data-toggle="collapse" data-target="#aboutUs">
        <h4 class="caps">continue reading</h4>
      </button>
        <div class="collapse panel-body col-md-10 col-md-offset-1 col-sm-10 col-sm-offset-1 col-xs-12" id="aboutUs">
          <p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis ante vulputate, tincidunt est nec, porttitor lorem. Praesent id nisi leo. Nunc imperdiet lacus quis condimentum tempus. Vestibulum mollis, magna at fermentum consequat, turpis elit suscipit libero, ac tincidunt purus nibh vitae massa. Aenean eleifend ipsum aliquam est euismod, non convallis ante mollis. Sed maximus dui sit amet dui vestibulum mattis. 
          </p> 
        </div>
    </div>
  </div>
</section> <!-- end about -->

---

我的问题的答案是这里。我没有正确地调用href，它与数据目标冲突。通过删除数据目标并使用我自己的折叠手风琴（第二个示例）编写，我能够绕过这个问题

在这里用我的初始示例运行这一行：

jQuery：

function scrollNav() {
  $('.navbar a').click(function(){  
     //Toggle Class
     $(".active").removeClass("active");      
     $(this).closest('li').addClass("active");
     var theClass = $(this).attr("class");
    $('.'+theClass).parent('li').addClass('active');
    //Animate
    $('html, body').animate({
    scrollTop: $( $(this).attr('href') ).offset().top - 61
      }, 1000);
        return false;
    });
    $('.scrollTop a').scrollTop();
    }


function scrollReadMoreBtn() {
  $(' #readMoreBtn').on('click', function(){  
     $('#aboutUs').slideDown('slow/400/fast');
    //Animate
    $('html, body').animate({
    scrollTop: $( '#aboutUs' ).offset().top - 61
      }, 1000);
        return false;
    });
    $('.scrollTop a').scrollTop();
    }

使用此HTML

<div class="about-background">
    <section class="about"> <!-- begin about -->
      <div class="container-fluid">
        <div class="row">
          <h1 class="slogan text-center">The <span class="red">POWER</span> of the <span class="blue">WEB</span></h1>
          <p class="text-center col-md-6 col-md-offset-3 col-xs-10 col-xs-offset-1  ">Lorem Ipsum</p>

          <button href="#readMore" class="read-more text-center col-md-4 col-md-offset-4 col-sm-10 col-sm-offset-1 col-xs-10 col-xs-offset-1" id="readMoreBtn" type="button" data-toggle="collapse" >
            <h4 class="caps">continue reading</h4>
          </button>
            <div class="collapse panel-body col-md-10 col-md-offset-1 col-sm-10 col-sm-offset-1 col-xs-12" id="aboutUs" name="readMore">
              <p class="text-justify">Lorem Ipsum content </p>
            </div>
          </div>
        </div>
      </section>
    </div>

---

我已经多次尝试在包括根div在内的多个元素上应用数据目标。因为它不在示例中，并不表示我没有尝试。谢谢你的批评。这是自举，什么是从头开始编码？我不是要求编写jQuery，我是问我的html代码是否正确，或者我是否缺少Bootstrap使用的html的一些元素。如果你检查我提供的代码笔链接，这是我的jQuery，这是我的CSS，这是我的HTML和我失败的代码。我是相当保守的，但是你最初的评论和假设是相当残酷的。我不确定你做了什么，因为这没有回答我的问题。我理解免费帮助，但你从一开始就嘲笑我调试自己代码的尝试。而且，我也不关注导航。在我的常规编码中，这很好。我说的是一个按钮，上面写着“继续阅读”，切换内容以显示，但随后向上滚动以显示内容，因为空间有限。我通过阅读jQuery并找到href和数据切换之间的冲突来解决我自己的问题。我必须重写jQuery并实现我自己的手风琴，这样他们才能演奏得很好。