onclick slideToggle + scrollTo DIV

Question

我有一个非常简单的函数，即 slideToggle() 一个隐藏的 div 并将一个 div 滚动到顶部。 slideToggle 工作正常，滚动到顶部根本不起作用。

有什么提示吗？ 我的想法是，当 scrollTo 函数结束时，然后启动 slideToggle 之一。

$(document).on("click", ".more-about", function() {
  $(this).parent().find('.hide').slideToggle(800),
    $(this).parent().find('.more').hide(),
    $('.whole').scrollTo('#about', 100)
});

.more-about {
  cursor: pointer
}

.hide {
  color: red;
  display: none
}

.whole {
  background: #f2f2f2
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="whole">
  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
  laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
  est laborum."<br><br>
  <div class="more-about">MORE</div>
  <div class="hide">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</div>
  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>


</div>

Answer 1

更新：$('.whole').scrollTop('#about', 100)

你的 dom 中没有 #about。

$(document).on("click", ".more-about", function() {
  $(this).parent().find('.hide').slideToggle(800),
    $(this).parent().find('.more').hide(),
    $('.whole').scrollTop('#about', 100)
});

.more-about {
  cursor: pointer
}

.hide {
  color: red;
  display: none
}

.whole {
  background: #f2f2f2
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="whole">
  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
  laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
  est laborum."<br><br>
  <div class="more-about">MORE</div>
  <div class="hide">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</div>
  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>


</div>

Answer 2

我相信你想在点击更多时显示隐藏的内容并滚动到新内容的位置，这里是 bin -- http://jsbin.com/wigojowabu/edit?html,js,console,output

$(document).on("click", ".more-about", function() {
  $(this).parent().find('.hide').slideToggle(800);
    $(this).hide();
    window.scrollTo(0,$('#about').offset().top);
});

我已经使用 window.scrollTo(xpos, ypos) 滚动到元素。

Answer 3

您可以在内部使用animate() 和scrollTop 在好部分中自动滚动。请尝试以下操作：

$(document).on("click", ".more-about", function() {
  $(this).parent().find('.hide').slideToggle(800)
    $(this).parent().find('.more').hide()
    $('html').animate( { scrollTop: ($(".whole").scrollTop()+$(".more-about").offset().top) }, 1000 );
});

.more-about {
  cursor: pointer
}

.hide {
  color: red;
  display: none
}

.whole {
  background: #f2f2f2
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="whole">
  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
  laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
  est laborum."<br><br>
  <div class="more-about">MORE</div>
  <div class="hide">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</div>
  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>


</div>