pat-scroll: Implement selector:top

CHANGES.md

@@ -5,6 +5,7 @@
 Features
 ~~~~~~~~
 
+- pat-scroll: Implement new special `selector:top` attribute value to scroll the scroll container just to the top of the page. Ref: #721.
 - pat-scroll: To define the scrollable target search also for `overflow-x` and `overflow-y` declarations.
 - Rework push message support for the STOMP message protocoll instead of backends instead of WAMP.
   We are using the RabbitMQ message broker for push support instead of crossbar.io.

src/pat/scroll/documentation.md

@@ -51,5 +51,5 @@ The available options are:
 | ----- | ------- | ----------- | ----------- | 
 | `trigger`   | `click` | `click`, `auto` | `auto` means that the scrolling will happen as soon as the page loads. `click` means that the configured element needs to be clicked first. |
 | `direction` | `top`   | `top`, `left`   |  The direction in which the scrolling happens. |
-| `selector`  |         | A CSS or jQuery selector string. | A selector for the element which will be scrolled by a number of pixels equal to `offset`. By default it will be the element on which the pattern is declared. Ignored unless `offset` is specified.|
+| `selector`  | `top`, CSS selector| A CSS or jQuery selector string or 'top'. | A selector for the element which will be scrolled by a number of pixels equal to `offset`. By default it will be the element on which the pattern is declared. Ignored unless `offset` is specified.|
 | `offset`    |         | A number   | `offset` can only be used with scrollable elements.  (An element is "scrollable" if it has scrollbars, i.e. when the CSS property `overflow` is either `auto` or `scroll`.)  The element scrolled by `offset` can be specified with the `selector` option.  If `selector` is not present, the element on which `pat-scroll` is declared will be scrolled. |

src/pat/scroll/index.html

@@ -88,7 +88,9 @@ <h3>3</h3>
                 </p>
             </section>
             <p>
-                <a href="#demo-main-nav" class="pat-scroll" data-pat-scroll="trigger:auto">Back to top</a>
+                <a href="#demo-main-nav" 
+                   class="pat-scroll" 
+                   data-pat-scroll="selector: top; trigger: auto">Back to top</a>
             </p>
         </article>
 	</body>

src/pat/scroll/scroll.js

@@ -120,6 +120,20 @@ define([
             }
         },
 
+        findScrollContainer: function(el) {
+            var scrollable = $(el).parents().filter(function() {
+                return (
+                    ['auto', 'scroll'].indexOf($(this).css('overflow')) > -1 ||
+                    (scroll === 'scrollTop' && ['auto', 'scroll'].indexOf($(this).css('overflow-y')) > -1) ||
+                    (scroll === 'scrollLeft' && ['auto', 'scroll'].indexOf($(this).css('overflow-x')) > -1)
+                );
+            }).first();
+            if ( typeof scrollable[0] === 'undefined' ) {
+                scrollable = $('html, body');
+            }
+            return scrollable;
+        },
+
         smoothScroll: function() {
             var href, fragment;
             var scroll = this.options.direction == "top" ? 'scrollTop' : 'scrollLeft',
@@ -128,6 +142,10 @@ define([
                 // apply scroll options directly
                 scrollable = this.options.selector ? $(this.options.selector) : this.$el;
                 options[scroll] = this.options.offset;
+            } else if (this.options.selector === "top") {
+                // Just scroll up, period.
+                scrollable = this.findScrollContainer(target);
+                options['scrollTop'] = 0;
             } else {
                 // Get the first element with overflow (the scroll container)
                 // starting from the *target*
@@ -144,23 +162,9 @@ define([
                     return;
                 }
 
-                scrollable = $(target.parents().filter(function() {
-                    return (
-                        ['auto', 'scroll'].indexOf($(this).css('overflow')) > -1 ||
-                        (scroll === 'scrollTop' && ['auto', 'scroll'].indexOf($(this).css('overflow-y')) > -1) ||
-                        (scroll === 'scrollLeft' && ['auto', 'scroll'].indexOf($(this).css('overflow-x')) > -1)
-                    );
-                }).first())
+                scrollable = this.findScrollContainer(target);
 
-                if ( typeof scrollable[0] === 'undefined' ) {
-                    scrollable = $('html, body');
-                    // positioning context is document
-                    if ( scroll === "scrollTop" ) {
-                        options[scroll] = Math.floor(target.safeOffset().top);
-                    } else {
-                        options[scroll] = Math.floor(target.safeOffset().left);
-                    }
-                } else if ( scroll === "scrollTop" ) {
+                if ( scroll === "scrollTop" ) {
                     // difference between target top and scrollable top becomes 0
                     options[scroll] = Math.floor(scrollable.scrollTop()
                                                  + target.safeOffset().top