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>