Merge pull request #188 from Erikmitk/feature/fix_scroll_to_top

Improve erratic auto-scrolling in back office
kitodo · Jul 17, 2020 · 2556c27 · 2556c27
2 parents 29fb987 + 8227ef5
commit 2556c27
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 17 deletions.
diff --git a/Resources/Public/JavaScript/QucosaBe.js b/Resources/Public/JavaScript/QucosaBe.js
@@ -309,12 +309,11 @@ define(['jquery', 'TYPO3/CMS/Dpf/jquery-ui','twbs/bootstrap-datetimepicker'], fu
                 .css({'display': 'none'})
                 .insertAfter($('fieldset[data-group="' + dataGroup + '"]').last());
 
-            var height = $('fieldset[data-group="' + dataGroup + '"]')
-                .last()
-                .outerHeight(true)
+            $(group).fadeIn(200, function(){
+                $('html, body').animate({scrollTop: group.position().top}, 400);
+            })
 
-            $('html, body')
-                .animate({scrollTop: element.offset().top - height}, 400, function() {$(group).fadeIn();});
+            group.find('input, textarea').first().focus();
 
             buttonFillOutServiceUrn();
             datepicker();
@@ -404,7 +403,7 @@ define(['jquery', 'TYPO3/CMS/Dpf/jquery-ui','twbs/bootstrap-datetimepicker'], fu
             if (element.error) {
                 var errorMsg = $('<div class="alert alert-danger alert-filloutservice-urn" role="alert"><span class="glyphicon glyphicon glyphicon-fire pull-right"></span>' + form_error_msg_filloutservice + '</div>');
                 errorMsg.insertAfter(group.find('legend'));
-                $("html, body").animate({scrollTop: group.offset().top}, 200);
+                $("html, body").animate({scrollTop: group.position().top}, 200);
             } else {
                 $('#qucosaid').val(element.qucosaId);
                 $('#qucosaUrn').val(element.value);
@@ -587,8 +586,8 @@ define(['jquery', 'TYPO3/CMS/Dpf/jquery-ui','twbs/bootstrap-datetimepicker'], fu
                 updatePrevNextButtons(newActivePage);
 
                 $('html, body').animate({
-                    scrollTop:$('.tx-dpf').offset().top
-                },'fast');
+                    scrollTop:$('.tx-dpf').position().top
+                }, 200);
             }
 
             e.preventDefault();

diff --git a/Resources/Public/JavaScript/qucosa.js b/Resources/Public/JavaScript/qucosa.js
@@ -320,12 +320,13 @@ var addGroup = function() {
         jQuery(group).css({
             'display': 'none'
         }).insertAfter(jQuery('fieldset[data-group="' + dataGroup + '"]').last());
-        var height = jQuery('fieldset[data-group="' + dataGroup + '"]').last().outerHeight(true)
-        jQuery('html, body').animate({
-            scrollTop: element.offset().top - height
-        }, 400, function() {
-            jQuery(group).fadeIn();
-        });
+
+        jQuery(group).fadeIn(200, function(){
+            jQuery('html, body').animate({scrollTop: group.position().top}, 400);
+        })
+
+        group.find('input, textarea').first().focus();
+
         buttonFillOutServiceUrn();
         datepicker();
         addRemoveFileButton();
@@ -411,7 +412,7 @@ var fillOutServiceUrn = function() {
         if (element.error) {
             var errorMsg = $('<div class="alert alert-danger alert-filloutservice-urn" role="alert"><span class="glyphicon glyphicon glyphicon-fire pull-right"></span>' + form_error_msg_filloutservice + '</div>');
             errorMsg.insertAfter(group.find('legend'));
-            $("html, body").animate({scrollTop: group.offset().top}, 200);
+            $("html, body").animate({scrollTop: group.position().top}, 200);
         } else {
             jQuery('#qucosaid').val(element.qucosaId);
             jQuery('#qucosaUrn').val(element.value);
@@ -687,8 +688,8 @@ var previousNextFormPage = function() {
             updatePrevNextButtons(newActivePage);
 
             $('html, body').animate({
-                scrollTop:$('.tx-dpf').offset().top
-            },'fast');
+                scrollTop:$('.tx-dpf').position().top
+            },200);
         }
 
         e.preventDefault();