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

：（ '全体 '）$をscrollTopスプライト（' について＃'、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

は、ここでのビンがある - 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、yp os）を押して要素にスクロールします。

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>