How do I get my accordion anchor to scroll to the top of the browser window?

Question

Edit: I decided to scrap this method for my website, by keeping only one accordion tab open at a time. (while the user scrolls to their desired setting)

Nothing I have tried from stack overflow nor google has been working to make my anchor scroll to the top of the page (when my accordion divs are open). I don't know what I am missing...

Here is the page I'm referring to: calebelmeer.info/2.0/projects.php

I want the anchor to scroll up, when clicked for my accordion tabs, so that the user does not need to scroll down the page to see the accordion content.

For Jquery:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

Accordion Div:

<div id="accordion">
    <a id="tab1" class="tab">Website Criteria</a>
    <div id="tab1_Open" class="hidden open">
        <p>To make this website I followed the suggestions given via the modules in the Rightskill program. This required all of the following:
        <ul>
            <li>- A Style Tile</li>
            <li>- Wireframes</li>
            <li>- Prototype pages via Photoshop</li>
            <li>- A navigatable prototype in Invisio</li>
            <li>- Understanding of HTML5, CSS3, JS, jQuery, and Responsive Design.</li>
            <li>- Mobile and Cross Browser Support</li>
        </ul>
        <hr>
        <p>* The gradients were made with ColorZilla's <a href="http://www.colorzilla.com/gradient-editor/" target="_blank">Gradient Generator</a>.</p>
        <p>* My <a href="http://www.colourlovers.com/palette/4218192/Stormy_Seas" target="_blank">Color Palette</a> is from Colour Lovers.</p>
    </div>
    <a id="tab2" class="tab">Java Code</a>
    <div id="tab2_Open" class="hidden open">
        <p>Info: This doc is a project I did in Java for my Advanced Data Structures class.</p>
        <br>
        <p>Note: There is a test output at the end of the document.</p>
        <div class="pdf-wrap">
            <iframe class="frame" src=" https://docs.google.com/document/d/1J1QyDwrXOSjxbQf6xzabBPZzNEZiS2a5SOBjx7EbCvQ/pub?embedded=true"></iframe>
        </div>
        <div class="mobile">
            <hr>
            <p>This document is not viewable on this device. It cannot be viewed on displays with a width less then 801px, nor height less than 701px.</p>
        </div>
    </div>
    <a id="tab3" class="tab">POS Proposal</a>
    <div id="tab3_Open" class="hidden open">
        <p>Info: The following doc was a group project for my System Analysis and Design class.</p>
        <br>
        <p>I was primarily responsible for putting together the Process Modeling and Data Modeling sections. I also was in charge of formatting the final document.</p>
        <br>
        <div class="pdf-wrap">
            <iframe class="frame" src=" https://docs.google.com/document/d/1S7_pkqOUkUD-bZZLcvXqk3oudNf7FzEpoKM38iwnEZA/pub?embedded=true"></iframe>
        </div>
        <div class="mobile">
            <hr>
            <p>This document is not viewable on this device. It cannot be viewed on displays with a width less then 801px, nor height less than 701px.</p>
        </div>
    </div>
</div>
<script src="js/accordion.js"></script>

js/accordion.js :

$( document ).ready(function() { // when page is loaded

    function toggleActive(link){ // Set anchor to active
        if ( $(link).hasClass("active") ) {
            $(link).removeClass("active");
        } else {
            $(link).addClass("active");
        };
    };

    function scrollToElement(selector, time, verticalOffset) { // param 1 = id, param 2 = speed
        time = typeof(time) != 'undefined' ? time : 1000;
        verticalOffset = typeof(verticalOffset) != 'undefined' ? verticalOffset : 0;
        element = $(selector);
        offset = element.offset();
        offsetTop = offset.top + verticalOffset;
        $('html, body').animate({
        scrollTop: offsetTop
        }, time);
    }

    $('#accordion a').click(function(event) {
    // function when a tab is clicked   

        var link = '#' + event.target.id // set anchorLink variable to the anchor being clicked

        // Open clicked tab
        if (link == "#tab1") {
             // Show tab 1
            toggleActive(link);
            $( "#tab1_Open" ).slideToggle( "fast", function() {
                // want anchor to be at top of page so accordion content is not hidden
                scrollToElement($('#tab1'), 500);
            });
        } else if (link == "#tab2") {
            // Show tab 2               
            toggleActive(link);
            $( "#tab2_Open" ).slideToggle( "fast", function() {
                // want anchor to be at top of page so accordion content is not hidden
                scrollToElement($('#tab2'), 500);
            });
        } else if (link == "#tab3") {
            // Show tab 3
            toggleActive(link);
            $( "#tab3_Open" ).slideToggle( "fast", function() {
                // want anchor to be at top of page so accordion content is not hidden
                scrollToElement($('#tab3'), 500); 
            });
        } else {
            // Do nothing for other links
        };
    });
});

Answer 1

Try replacing the $('html,body') with $('article') inside your scrollToElement function.

Remember that the first argument should be a string, so call scrollToElement('#tab2', 500);.

The offset calculations within scrollToElement function need some adjustments.