Question

当我点击按钮时，我必须滚动一个特定的块（在可能的情况表中）。

    vm.uploadOmrFile = function() {

                vm.formSubmitted = true;
                if (!vm.partners) {
                    return;
                } else if (!vm.omrConfigurations) {
                    return;
                } else if (!vm.schools) {
                    return;
                } else if (!vm.classes) {
                    return;
                }


                formdata.append('classId', vm.configuration.classId);
                // formdata.append('omrConfigId', vm.configuration.omrConfigId);
                formdata.append('schoolId', vm.configuration.schoolId);
                // formdata.append('tenantId', vm.configuration.tenantId);
                var request = {
                    method: 'POST',
                    url: xxxxxx,
                    data: formdata,
                    transformRequest : angular.identity,
                    headers: {
                        'Content-Type': undefined
                    }
                };

                // SEND THE FILES.
                $http(request)
                    .success(function (d) {
                        vm.badrecords = 0;
                        vm.uploadresponse = d;
                        vm.records = d.studentAssessments;
                        vm.records.forEach(function(record){
                            if(record.output.type == 'invalid-csv') {
                                vm.badrecords += 1;
                            }
                        })

                    })
                    .error(function (error) {
                        toastr(error);
                    });


               setTimeout(function() {
                // set the location.hash to the id of
                // the element you wish to scroll to.
                $location.path('/omr-upload');
                $location.hash('message');

                $anchorScroll();

              }, 20000);

            }

这是html文件

   <!doctype html>
             <html>
            <div class="modal-footer">
            <button ng-click="vm.uploadOmrFile()" formnovalidate 
            class="btn btn-success" value="Upload" 
            dismiss="modal">Upload</button>
            <button type="button" class="btn btn-danger" data-
             dismiss="modal">Cancel</button>
            </div> 
     <tr>
        <td class="nopadding noborder">
             <table class="table">
              <tr>
                  <td colspan="4">
                     <div class="alert alert-danger"  id="message" ng-
                         if="vm.uploadresponse vm.uploadresponse.hasError" 
                           role="alert">{{vm.uploadresponse.hasError}}
                           <strong>{{vm.uploadresponse.message}}</strong>
                           <br> Total Records Parsed:{{vm.records.length}}
                           <br>RecordsError: {{vm.badrecords}}   
                       </div>

                  <div class="alert alert-success" id="message" ng-
                    if="vm.uploadresponse && !vm.uploadresponse.hasError">
                     <strong>{{vm.uploadresponse.message}}</strong>
                      <br> Total Records Parsed : {{vm.records.length}}
                       <br>Records with Error: 0    
                   </div>

                 </td>
             </tr>
                <tr ng-if="vm.uploadresponse &&  
                    vm.uploadresponse.hasError">
                    <th>Name</th>
                    <th>Sheet ID</th>
                    <th>Record Type</th>
                    <th>Messages</th>
                </tr>
               <tr ng-repeat="record in vm.records" ng-
                  if="vm.uploadresponse && vm.uploadresponse.hasError">
                   <td>{{record.name}}</td>
                   <td>{{record.omrsheet}}</td>
                   <td>{{record.output.type}}</td>
                   <td>
                      <div style="height:100px;overflow-y:scroll">
                          <div ng-repeat="msg in record.output.messages" 
                            class="error">
                             <p>{{msg}}</p>
                             </div>
                      </div>
                    </td>
                </tr>

                <tr ng-if="vm.uploadresponse && 
                   !vm.uploadresponse.hasError">
                    <td>
                       <h2><i class="glyphicon glyphicon-thumbs-up"  aria-
                           hidden="true"></i> All records fine! 
                           <button class="btn btn-warning btn-lg"  ng-
                                   click="vm.saveOMR()">Click to Save OMR 
                                   data</button>
                         </h2>
                      </td>
                  </tr>

             </table>
         </td>
     </tr>   
</html>

我的问题是当我点击上传按钮它应该去html的表格部分和上传按钮调用＆＃34; uploadOmrFile（）＆＃34;。
在我的情况下，滚动不会转到表格部分。
我使用id作为＆＃34; message＆＃34;，它使用location.hash。

Answer 1

   setTimeout(function() 
    { 
    document.getElementById('message').scrollIntoView({block: 'start', 
   behavior: 'smooth'}); },1000);`

粘贴此代码获得回复后

单击angularJS时自动滚动无法正常工作

1 个答案: