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

Posted 2023-03-12

【中文标题】是否可以向 window.scrollTo 添加持续时间和缓动？

【英文标题】：Is it possible to add duration and easing to window.scrollTo?

【发布时间】：2015-08-20 11:30:44

【问题描述】：

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

【问题讨论】：

javascript 的原生 scrollTo 函数没有缓动选项，你可以在这里看到developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo。您可以使用具有添加缓动和持续时间选项的 jQuery scrollTo 函数 (lions-mark.com/jquery/scrollTo)

谢谢。我一直在尝试使用 jQuery scrollTo 函数，但无法弄清楚如何将 window.scrollTo x 和 y 坐标 (0,difHigh) 转换为 jQuery 滚动到似乎需要作为其目标的单个数字，如: .scrollTo( target, options, [, complete] ) targetA 选择器、元素或数字。

【参考方案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>

这就是你要找的吗？

【讨论】：

非常感谢，艾哈迈德。这正是我所需要的，它使一切变得不同！当取消选择某个选项时，它也会更好地工作，因为动画会轻轻地将身体滚动回原始位置。再次感谢。

【参考方案2】：

2020 年更新：

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

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

【讨论】：

OP 询问持续时间和缓动。这只是添加了浏览器的默认平滑滚动效果。