Added ability to scroll to a specific element

Optional parameter is aware of (usually fixed) header menu to prevent element partially hidden beneath (especially if top menu is solid).

diff --git a/wcfsetup/install/files/js/WCF.js b/wcfsetup/install/files/js/WCF.js
index 2a201c29018b07ced6cfa3ad7e427a88414d7217..65ff1514749bb867f9a33d2ddf9b82a9375672d1 100644 (file)
--- a/wcfsetup/install/files/js/WCF.js
+++ b/wcfsetup/install/files/js/WCF.js
@@ -3262,33 +3262,61 @@ WCF.User = {
  */
 WCF.Effect = {};
 
+/**
+ * Scrolls to a specific element offset, optionally handling menu height.
+ */
+WCF.Effect.Scroll = Class.extend({
+       /**
+        * Scrolls to a specific element offset.
+        * 
+        * @param       jQuery          element
+        * @param       boolean         excludeMenuHeight
+        * @return      boolean
+        */
+       scrollTo: function(element, excludeMenuHeight) {
+               if (!element.length) {
+                       return true;
+               }
+               
+               var $elementOffset = element.getOffsets().top;
+               var $documentHeight = $(document).height();
+               var $windowHeight = $(window).height();
+               
+               // handles menu height
+               if (excludeMenuHeight) {
+                       $elementOffset = Math.max($elementOffset - $('#topMenu').outerHeight(), 0);
+               }
+               
+               if ($elementOffset > $documentHeight - $windowHeight) {
+                       $elementOffset = $documentHeight - $windowHeight;
+                       if ($elementOffset < 0) {
+                               $elementOffset = 0;
+                       }
+               }
+               
+               $('html,body').animate({ scrollTop: $elementOffset }, 400, function (x, t, b, c, d) {
+                       return -c * ( ( t = t / d - 1 ) * t * t * t - 1) + b;
+               });
+               
+               return false;
+       }
+});
+
 /**
  * Creates a smooth scroll effect.
  */
-WCF.Effect.SmoothScroll = function() { this.init(); };
-WCF.Effect.SmoothScroll.prototype = {
+WCF.Effect.SmoothScroll = WCF.Effect.Scroll.extend({
        /**
         * Initializes effect.
         */
        init: function() {
+               var self = this;
                $('a[href$=#top],a[href$=#bottom]').click(function() {
                        var $target = $(this.hash);
-                       if ($target.length) {
-                               var $targetOffset = $target.getOffsets().top;
-                               if ($targetOffset > $(document).height() - $(window).height()) {
-                                       $targetOffset = $(document).height() - $(window).height();
-                                       if ($targetOffset < 0) $targetOffset = 0;
-                               }
-                               
-                               $('html,body').animate({ scrollTop: $targetOffset }, 400, function (x, t, b, c, d) {
-                                       return -c * ((t=t/d-1)*t*t*t - 1) + b;
-                               });
-                               
-                               return false;
-                       }
+                       self.scrollTo($target, true);
                });
        }
-};
+});
 
 /**
  * Creates the balloon tool-tip.