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>