CODEWITHSUNDEEP
asp.netzurb-foundationaccordion
Ethan Schofer
Ethan Schofer

Reputation: 1848

Scroll to top of Foundation accordion on click - offset calculation

I have a Foundation accordion. When I click on one of the accordion anchors, I want it to scroll to the top of the current panel (although just to the top of the accordion control would be OK). The panels vary in size depending on the content. So the offset is I think screwed up. The first click works, because the offset calculation is correct. But on subsequent click, I think is calculating the location, then scrolling. But during the scroll, the new panel loads and the offset changes. So it scrolls somewhere to the middle of the panel. At least that's my theory. Even more confusing, its actually a tab control that falls back to an accordion for small screens.

Here is the accordion:

<dl class="accordion" data-accordion>
    <dd class="accordion-navigation active">
        <a class="show-for-small-only" href="#panel11">First Panel</a>
        <div class="content active" id="panel11">
            <div class="row">
                <div class="medium-12 columns">
                    <div class="panel radius">
                        <h1 class="text-center">Some Header Text</h1>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="medium-4 columns end">
                    //Some content...             
                </div>
                <div class="medium-4 columns">
                    //Some content...          
                </div>
                <div class="medium-4 columns">
                    //Some content...        
                </div>
            </div>
        </div>
        <a class="show-for-small-only" href="#panel21">Second Panel</a>
        <div class="content active" id="panel21">
            <div class="row">
                <div class="medium-12 columns">
                    <div class="panel radius">
                        <h1 class="text-center">Some Header Text</h1>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="medium-4 columns end">
                    //Some content...             
                </div>
                <div class="medium-4 columns">
                    //Some content...          
                </div>
                <div class="medium-4 columns">
                    //Some content...        
                </div>
            </div>
        </div>
    </dd>
</dl>

And here is the scrolling script:

<script>
    $(".accordion dd > a").click(function () {
        var href = $(this).attr("href")
        $('html, body').animate({
            scrollTop: ($(href).offset().top)
        }, 1000);
    });
</script>

Upvotes: 0

Views: 1073

Answers (2)

Ethan Schofer
Ethan Schofer

Reputation: 1848

Here was the final solution that worked: 

$(".accordion dd > a").click(function () {
        var self = this;
        setTimeout(function () {
            theOffset = $(self).offset();
            $('body,html').animate({ scrollTop: theOffset.top - 100 });
        }, 310);
    });

Upvotes: 0

Francis Nepomuceno
Francis Nepomuceno

Reputation: 5085

Ah, in your script check the href part. Should be something like

var elem = $(this); $('html, body').animate({ scrollTop: elem.offset().top }, 1000);

Upvotes: 0

Related Questions