CODEWITHSUNDEEP
javascriptjquery
Mark Hill
Mark Hill

Reputation: 1839

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. It's always worked nicely in the past for me.

What the application is suppose to do is the following:

  1. All sections load and the first section immediately expands, everything else remains collapsed (this works)
  2. You can click on another section, and the section that is currently open will collapse, and the one you clicked will expand (this works)
  3. After expansion is completed, the window will scroll to the top of the expanded section (this does not work)

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. 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

<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/

Upvotes: 0

Views: 809

Answers (1)

canon
canon

Reputation: 41665

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):

$('.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.

Upvotes: 2

Related Questions