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?
Try this:
window.scrollTo(0, difHigh);
line inside the if (difHigh>0) {}
clause.$('html,body').animate({scrollTop:difHigh},400);
instead.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?