上传文档时突出显示最新文件，滚动条应根据文档移动

Question

我正在尝试根据新上传来实现移动滚动条的功能，当我当时上传任何文档时，我会高亮该文档，假设我的列表中有 20 个文档，那么我正在上传第 21 个文档时间滚动条应该移动到该文档意味着它应该根据新文档移动，目前我通过高亮显示最新文档但滚动条没有移动，如果有人知道如何实现此功能，请指导我如何做到这一点UI 新手。谢谢。

这是我显示文档列表的 html 代码：

<div id="resume-panel" class="panel-collapse collapse">
            <div class="panel-body upload-newFile-container">
                <div class="input-group file-preview">
                    <input placeholder="" type="text" class="form-control file-preview-filename" ng-value="(myFile.length > 1 ? myFile[0]._file.webkitRelativePath.substring(0, myFile[0]._file.webkitRelativePath.lastIndexOf('/')) : myFile.name)" disabled="disabled">
                    <span class="input-group-btn button-position">
                        <div class="btn btn-info btn-labeled file-preview-input" ng-disabled="isSingleFileSelected">
                            <span class="glyphicon glyphicon-folder-open"></span>
                    <span class="file-preview-input-title">BrowseFolder</span>
                     <input type="file" ng-click="clearFileName()" id="uploadId" webkitdirectory directory multiple file-upload="myFile" accept=".txt, .rtf, .pdf, .doc, .docx, .rtx, .odt, .sxw, .wpd, .odf"
                            name="input-file-preview" />
                </div>
                <div class="btn btn-info btn-labeled file-preview-input" ng-disabled="isFolderSelected">
                    <span class="glyphicon glyphicon-file"></span>
                    <span class="file-preview-input-title">BrowseFile</span>
                    <input type="file" ng-click="clearFileName()" file-upload="myFile" ng-disabled="isFolderSelected" accept=".txt, .rtf, .pdf, .doc, .docx, .rtx, .odt, .sxw, .wpd, .odf" name="input-file-preview"
                    />
                </div>
                <button type="button" class="btn btn-labeled btn-info" ng-disabled="myFile === null || myFile === undefined || uploadButtonDisabled" data-ng-click="upload();disableButton()" ng-change="latestResume()">
                            <span class="btn-label">
                                <i class="glyphicon glyphicon-upload"></i>
                            </span>Upload
                        </button>
                </span>
            </div>
            <uib-progressbar
                class="progress-striped active"
                ng-show="folderProcessing && !isSingleFile"
                animate="true" max="100"
                value="progressValuePercentage"
                type="success">
                <i>
                    <span>
                        {{progressValuePercentage}} / 100
                    </span>
                </i>
            </uib-progressbar>
            <div class="processed-file-container col-xs-12 col-md-12 nopadding">
                <div class="loading-message-container" ng-show="showResumeLoadingPanel">
                    <h3>Loading data... Please wait.</h3>
                    <div class="progress progress-striped active page-progress-bar">
                        <div class="progress-bar" style="width: 100%;"></div>
                    </div>
                </div>
                <div class="processed-document col-xs-12 col-md-12 col-lg-12 nopadding" ng-show="!showResumeLoadingPanel">
                    <div class="panel-heading">
                        <span ng-if="jdSelected" class="jdContext jdContextInManageResume" ng-show="isjdDeleted">
                                <span>Company   :  {{companyName}}</span><br>
                        <span>JobDescription : {{jdName}}</span>
                        </span>
                        <div class="pull-right nopadding refreshBtnInManageResume">
                            <button class="btn btn-labeled btn-info btn-reload pull-right" data-ng-click="loadResumePanel()">
                                    <i class="fa fa-refresh" aria-hidden="true"></i>
                                    <span class="small-left-margin">Refresh</span>
                                </button>
                        </div>
                        <div class="pull-right nopadding download-quick-tracker-position" ng-if="jdSelected && processResumeFiles.length > 0" ng-show="isjdDeleted">
                            <button class="btn btn-labeled btn-info pull-right" data-ng-click="downloadQuickTracker(jdUniqueId)">
                                    <i class="fa fa-download" aria-hidden="true"></i>
                                    <span class="">QuickTracker</span>
                                </button>
                        </div>
                    </div>
                    <div class="panel-body">
                        <div class="row marginForRefreshBtn">
                                <table class="table table-striped" id="manageResumeTable">
                                    <thead class="text-center text-info text-capitalize">
                                        <th class="text-center col-xs-1">Sr.No.</th>
                                        <th class="text-center col-xs-4">Document</th>
                                        <th class="text-center col-xs-1">Score</th>
                                        <th class="text-center col-xs-1">QuickScore</th>
                                        <th class="text-center col-xs-5">Actions</th>
                                    </thead>
                                    <tr ng-repeat="file in processResumeFiles" ng-class="{'highlighter-row-Class' : file.id == 1}">
                                        <td class="text-center col-xs-1">{{ file.temporaryId }}</td>
                                        <td class="view-orphan uploadResumeTableCellOverFlow col-xs-4">
                                            {{ file.attributes.name }}
                                        </td>
                                        <td class="text-center col-xs-1">{{file.totalScore}}</td>
                                        <td class="text-center col-xs-1" ng-class= "{'highlighter-QuickScore' : file.attributes.areQuickScoreFieldsMissing}">{{file.attributes.quickScore}}</td>
                                        <td class="text-center col-xs-5">
                                            <button class="btn btn-labeled  btn-info" title="Annotate Un-annotated Words" data-ng-click="getOrphans($index)">
                                                    <i class="fa fa-eye" aria-hidden="true"></i>
                                                </button>
                                            <button class="btn btn-labeled  btn-info" title="Promote to Gold Standard" ng-disabled="!file.attributes.isModelHtmlPresent" data-ng-click="markAsGoldStd(file.attributes.name)">
                                                    <i class="fa fa-share" aria-hidden="true"></i>
                                                </button>
                                            <button class="btn btn-labeled  btn-info" title="Delete from Corpus" data-ng-click="deleteResume(file.attributes.name)">
                                                    <i class="fa fa-trash" aria-hidden="true"></i>
                                                </button>
                                            <button class="btn btn-labeled  btn-info" title="Add to Tracker" ng-disabled="!file.attributes.isModelHtmlPresent || !isjdDeleted || !jdSelected"
                                                    data-ng-click="moveToJobDescription(file.attributes.name)">
                                                    <i class="fa fa-check-square" aria-hidden="true"></i>
                                                </button>
                                        </td>
                                    </tr>
                                </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

这是我的 UI 视图，它当前的显示方式。

不懂的可以问我，谢谢

Answer 1

您可以将滚动条保持在顶部：

$('html, body').animate({
        scrollTop: 0
 }, 1000);