如何在点击时将动画滚动应用于div

时间:2015-06-11 02:48:45

标签: jquery html

我正在尝试使我的可扩展div(#myContent)在"了解更多"点击。

我有使div扩展的功能,但我似乎无法让窗口专注于扩展div(#myContent)



$(function () {
    $('a.togglebtn').click(function () {
        $(".glyphicon").toggleClass("glyphicon-minus glyphicon-plus");
        $('#toggleText').text($('#toggleText').text() === "Learn More" ? "Hide" : "Learn More");
        $('#myContent').stop().slideToggle(500);
        return false;
    });
});

 $('a.togglebtn').bind("click", function() {
    scrollToElement('#mycontent', 1000, -50);
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="lead p-color learn-button togglebtn">
  <small>
    <span class="glyphicon glyphicon-plus">
      </span>&nbsp;<span id="toggleText">Learn More</span>
  </small>
</a>
</div>

<div id="myContent" class="row row-offset" style="margin: 0 30px">
  <div class="col-xs-6 col-md-4">
    <div class="lead caption text-center">
      <h3 class="h-color">Profile</h3>
    </div>
    <div class="thumbnail">
      <img style="height: 100px; width: auto;" class="img-circle" src="images/logo-bunny.png" alt="Thumbnail">
    </div>
    <div class="lead caption">
      <p class="p-color"><small>Some sample text. Some sample text.</small></p>
    </div>
  </div>
</div>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

尝试按钮点击事件?

$('a.togglebtn').on('click', function () {
    $('html,body').animate({ scrollTop: $('#myContent').offset().top - 50 }, 500);
});