是否可以将持续时间和缓动添加到 window.scrollTo?
Is it possible to add duration and easing to window.scrollTo?
我正在使用 Bill Miller 的交互式决策指南代码。
http://www.guiideas.com/2013/09/interactive-decision-guide.html
要将新问题滚动到页面底部的视图中,他使用 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);}
是否可以为 window.scrollTo 添加持续时间和缓动,或者有其他方法吗?
试试这个:
- 注释掉(或删除)
if (difHigh>0) {}
子句中的 window.scrollTo(0, difHigh);
行。
- 改为添加
$('html,body').animate({scrollTop:difHigh},400);
。
JavaScript 变化:
if (difHigh > 0) {
$('html,body').animate({scrollTop:difHigh},400);
//window.scrollTo(0, difHigh);
}
片段:
$(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> 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> million or more <i>9</i>
</li>
<li>Less than 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>
这是您要找的吗?
2020 年更新:
您可以window.scrollTo({ top: 400, behavior: 'smooth' })
使页面滚动的效果更流畅。我相信这是自 2017-2018 年以来可用的。
MDN 参考:https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo#Examples
我正在使用 Bill Miller 的交互式决策指南代码。
http://www.guiideas.com/2013/09/interactive-decision-guide.html
要将新问题滚动到页面底部的视图中,他使用 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);}
是否可以为 window.scrollTo 添加持续时间和缓动,或者有其他方法吗?
试试这个:
- 注释掉(或删除)
if (difHigh>0) {}
子句中的window.scrollTo(0, difHigh);
行。 - 改为添加
$('html,body').animate({scrollTop:difHigh},400);
。
JavaScript 变化:
if (difHigh > 0) {
$('html,body').animate({scrollTop:difHigh},400);
//window.scrollTo(0, difHigh);
}
片段:
$(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> 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> million or more <i>9</i>
</li>
<li>Less than 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>
这是您要找的吗?
2020 年更新:
您可以window.scrollTo({ top: 400, behavior: 'smooth' })
使页面滚动的效果更流畅。我相信这是自 2017-2018 年以来可用的。
MDN 参考:https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo#Examples