是否可以向 window.scrollTo 添加持续时间和缓动？

Question

我正在使用 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 添加持续时间和缓动，或者是否有替代方法？

Answer 1

试试这个：

• 注释掉（或删除）window.scrollTo(0, difHigh); 子句中的 if (difHigh>0) {} 行。
• 改为添加$('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>$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>

这就是你要找的吗？

Answer 2

2020 年更新：

您可以通过window.scrollTo({ top: 400, behavior: 'smooth' }) 来获得平滑滚动的页面。我相信这自 2017-2018 年以来一直可用。

MDN 参考：https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo#Examples