javascriptinteractivescrolltodecision-treeeasing

Is it possible to add duration and easing to window.scrollTo?


I'm using Bill Miller's Interactive Decision guide code.

http://www.guiideas.com/2013/09/interactive-decision-guide.html

To scroll new questions into view at the bottom of the page he uses window.scrollTo

    //scroll code to bring next question into view
var qNextPos = $('#qTable' + qNext).offset();
var qNextTop = qNextPos.top;
var qNextHigh = $('#qTable' + qNext).height();
var qNextBot = qNextHigh + qNextTop + 20; 
var scrHigh = $(window).innerHeight();
var difHigh = qNextBot - scrHigh; 
if(difHigh > 0) {window.scrollTo(0,difHigh);}

Is it possible to add duration and easing to window.scrollTo or is there an alternative method?


Solution

  • Try this:

    JavaScript changes:

    if (difHigh > 0) {
        $('html,body').animate({scrollTop:difHigh},400);
        //window.scrollTo(0, difHigh);
    }
    

    Snippet:

    $(document).ready(function () {
        //checks difference between number of rows and ids. If none, guide is complete and code can be removed.
        //if a result is used in more that one question reduce the value or results by the number of reuses
        var rows = $('#qTable tr').length - 1;
        var liids = $('#qTable li').length;
        if (rows != liids) {
            $('#errdiv').html('Number of rows ( ' + rows + ' ) does not match the number of questions ( ' + liids + ' )').show()
        }
    
        $('#qTable li').on('click', function () {
            //style the selected answer
            $(this).addClass('selectedAnswer').siblings().removeClass('selectedAnswer');
            //hide all rows after the currently displayed row and remove selectedAnswer style
            var rowCurrent = $(this).closest("tr").prevAll("tr").length + 2;
            var rowsAfter = ' tr:nth-child(n+' + rowCurrent + ')';
            $('#qTable' + rowsAfter).hide().find('li').removeClass('selectedAnswer');
            //show the next row that matches the question id
            var italNum = $(this).find('i').text();
            var qNext = ' tr:nth-child(' + italNum + ')';
            $('#qTable' + qNext).fadeIn(800);
            //scroll code to bring next question into view
            var qNextPos = $('#qTable' + qNext).offset();
            var qNextTop = qNextPos.top;
            var qNextHigh = $('#qTable' + qNext).height();
            var qNextBot = qNextHigh + qNextTop + 20;
            var scrHigh = $(window).innerHeight();
            var difHigh = qNextBot - scrHigh;
            if (difHigh > 0) {
                $('html,body').animate({scrollTop:difHigh},400);
                //window.scrollTo(0, difHigh);
            }
        })
    })
    #qTable td {
        padding:3px 1em;
        border:1px solid #ccc;
        border-radius:5px;
        background-color:#FeF;
        font-family:"Segoe UI"
    }
    #qTable {
        width:100%;
        border-spacing:0.5em
    }
    #qTable li {
        cursor:pointer
    }
    #qTable li:hover {
        text-decoration:underline
    }
    #qTable tr:nth-child(n+2) {
        display:none
    }
    #qTable p {
        font-weight:bold;
        line-height:50%
    }
    #errdiv {
        display:none;
        font-weight:bold;
        color:#903;
        padding:0.3em
    }
    .selectedAnswer {
        font-weight:bold;
        color:#060
    }
    i {
        display:none
    }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
    <div id="errdiv"></div>
    <table id="qTable">
        <tr>
            <td>
                <p>The Applicant is a:</p>
                <ul>
                    <li>Person <i>2</i>
                    </li>
                    <li>Corporation <i>3</i>
                    </li>
                </ul>
            </td>
        </tr>
        <tr>
            <td>
                <p>The person live in:</p>
                <ul>
                    <li>Grande Oak Estates <i>11</i>
                    </li>
                    <li>Other neighborhood <i>4</i>
                    </li>
                </ul>
            </td>
        </tr>
        <tr>
            <td>
                <p>The corporation's annual sales are:</p>
                <ul>
                    <li>$5 million or more <i>10</i>
                    </li>
                    <li>Less than $ 5 million <i>6</i>
                    </li>
                </ul>
            </td>
        </tr>
        <tr>
            <td>
                <p>What is the person's golf handicap?</p>
                <ul>
                    <li>Less than 5 <i>8</i>
                    </li>
                    <li>5 or more <i>5</i>
                    </li>
                </ul>
            </td>
        </tr>
        <tr>
            <td>
                <p>What is the person's net worth?</p>
                <ul>
                    <li>$2 million or more <i>9</i>
                    </li>
                    <li>Less than $2 million<i>7</i>
                    </li>
                </ul>
            </td>
        </tr>
        <tr>
            <td>The corporation does not qualify for a membership</td>
        </tr>
        <tr>
            <td>The person does not qualify for a membership</td>
        </tr>
        <tr>
            <td>The person qualifies for a discounted membership</td>
        </tr>
        <tr>
            <td>The person qualifies for a regular membership</td>
        </tr>
        <tr>
            <td>The corporation qualifies for a corporate membership</td>
        </tr>
        <tr>
            <td>The person qualifies for a regular membership</td>
        </tr>
    </table>

    Is this what you were looking for?