https://www.broadinstitute.org/modules/contrib/webform/js/webform.scroll.js?tlt8pl

1/**
2 * @file
3 * JavaScript behaviors for webform scroll top.
4 */
5
6(function ($, Drupal) {
7  Drupal.webform = Drupal.webform || {};
8  // Allow scrollTopOffset to be custom defined or based on whether there is a
9  // floating toolbar.
10  Drupal.webform.scrollTopOffset = Drupal.webform.scrollTopOffset || ($('#toolbar-administration').length ? 140 : 10);
11
12  /**
13   * Scroll to top ajax command.
14   *
15   * @param {Element} element
16   *   The element to scroll to.
17   * @param {string} target
18   *   Scroll to target. (form or page)
19   */
20  Drupal.webformScrollTop = function (element, target) {
21    if (!target) {
22      return;
23    }
24
25    var $element = $(element);
26
27    // Scroll to the top of the view. This will allow users
28    // to browse newly loaded content after e.g. clicking a pager
29    // link.
30    var offset = $element.offset();
31    // We can't guarantee that the scrollable object should be
32    // the body, as the view could be embedded in something
33    // more complex such as a modal popup. Recurse up the DOM
34    // and scroll the first element that has a non-zero top.
35    var $scrollTarget = $element;
36    while ($scrollTarget.scrollTop() === 0 && $($scrollTarget).parent()) {
37      $scrollTarget = $scrollTarget.parent();
38    }
39
40    if (target === 'page' && $scrollTarget.length && $scrollTarget[0].tagName === 'HTML') {
41      // Scroll to top when scroll target is the entire page.
42      // @see https://stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport
43      var rect = $($scrollTarget)[0].getBoundingClientRect();
44      if (!(rect.top >= 0 && rect.left >= 0 && rect.bottom <= $(window).height() && rect.right <= $(window).width())) {
45        $scrollTarget.animate({scrollTop: 0}, 500);
46      }
47    }
48    else {
49      // Only scroll upward.
50      if (offset.top - Drupal.webform.scrollTopOffset < $scrollTarget.scrollTop()) {
51        $scrollTarget.animate({scrollTop: (offset.top - Drupal.webform.scrollTopOffset)}, 500);
52      }
53    }
54  };
55
56  /**
57   * Scroll element into view.
58   *
59   * @param {jQuery} $element
60   *   An element.
61   */
62  Drupal.webformScrolledIntoView = function ($element) {
63    if (!Drupal.webformIsScrolledIntoView($element)) {
64      $('html, body').animate({scrollTop: $element.offset().top - Drupal.webform.scrollTopOffset}, 500);
65    }
66  };
67
68  /**
69   * Determine if element is visible in the viewport.
70   *
71   * @param {Element} element
72   *   An element.
73   *
74   * @return {boolean}
75   *   TRUE if element is visible in the viewport.
76   *
77   * @see https://stackoverflow.com/questions/487073/check-if-element-is-visible-after-scrolling
78   */
79  Drupal.webformIsScrolledIntoView = function (element) {
80    var docViewTop = $(window).scrollTop();
81    var docViewBottom = docViewTop + $(window).height();
82
83    var elemTop = $(element).offset().top;
84    var elemBottom = elemTop + $(element).height();
85
86    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
87  };
88
89})(jQuery, Drupal);