[英]ScrollTo() function is not working properly with sections
I have a series of sections on an application that I just finished developing. 我有刚刚完成开发的应用程序的一系列部分。 I'm using the scrollTo plugin for jQuery. 我正在使用jQuery的scrollTo插件。 It's always worked nicely in the past for me. 过去对我来说一直很好。
What the application is suppose to do is the following: 该应用程序应该执行以下操作:
I need help on step three there. 我需要那里第三步的帮助。 My code is below. 我的代码如下。
I have searched for various topics on the scrollTo() plugin and the the use of ScrollTop. 我已经在scrollTo()插件和ScrollTop的用法上搜索了各种主题。 I have tried both, but nothing has changed. 我都尝试过,但是什么都没有改变。
I'm wondering if it has something to do with when the toggle function is called but I"m not sure. 我想知道调用切换功能时是否与它有关,但我不确定。
I'm really hoping to find an answer here. 我真的很希望在这里找到答案。 If you need further explanation or code, please let me know! 如果您需要进一步的说明或代码,请告诉我!
//module expansion and contraction
$('.module-heading').click(function(){
var id = $(this).attr('id');
var data = $(this).data('toggle');
$('.app-section').each(function(){
if($(this).is(':visible')){
$(this).toggle('slow');
}
})
$(data).toggle('slow', function(){
$(id).scrollTo(100);
});
});
Here is sample HTML as well 这也是示例HTML
<div class='row module-heading module-heading-plain' data-toggle='#questionaire'>
<div class='form-group'>
<div class='col-md-12'>
<h4 class='text-info'>
Pre-Application Questionaire
</h4>
</div>
</div>
</div>
<span id='questionaire'>
<!-- form goes here -->
</span>
Here is a link to a fiddle http://jsfiddle.net/5q48n0z1/4/ 这是小提琴的链接http://jsfiddle.net/5q48n0z1/4/
It seems like you want to scroll the body to the new section. 似乎您想将正文滚动到新部分。 So, we'll need to target the html/body in order to do that ( fiddle ): 因此,我们需要以html / body为目标( fiddle ):
$('.module-heading').click(function(){
var $this = $(this);
$('.app-section:visible').hide("slow");
$($this.data('toggle')).show('slow', function(){
$("html,body").animate({
scrollTop: $this.offset().top
});
});
});
Note: you'll need to have overflow content in order to scroll the body. 注意:您需要具有溢出内容才能滚动正文。 You might consider adding some padding to the body. 您可能会考虑在主体上添加一些填充。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.