add offset scrolling ability

Author: Kevin Olson

plugins/system/autoscrollspy/assets/autoscrollspy.js

@@ -150,4 +150,31 @@ function attemptForceSticky(){
     parent.style.top = '0';
     parent.style.zIndex = '1000';
 
-}
+}
+
+
+//handle offset scrollOffsetTop attribute given from params
+//whenever a local link is clicked, we need to scroll to the right position
+//joomla provides scrollOffsetTop as const so we can use that
+//add event listener to all .autoss-local-link  (they are a elems)
+
+if(scrollOffsetTop != 0){
+    const localLinks = document.querySelectorAll('.autoss-local-link');
+    for (var i = 0; i < localLinks.length; i++) {
+        localLinks[i].addEventListener('click', function(e) {
+            e.preventDefault();
+            console.log('clicked'   + this.getAttribute('href'));
+            var href = this.getAttribute('href');
+            var id = href.replace('#', '');
+            var el = document.getElementById(id);
+            var pos = el.offsetTop - scrollOffsetTop;
+            window.scrollTo({
+                top: pos,
+                behavior: 'smooth'
+            });
+        });
+    }
+}
+
+
+

plugins/system/autoscrollspy/autoscrollspy.php

@@ -22,7 +22,7 @@ class PlgSystemAutoScrollSpy extends CMSPlugin
     public function onContentBeforeDisplay($context, &$article, &$params, $limitstart){
 
 
-        //get params for plugin from plugin settings without new registery
+        //setup
         $plugin = PluginHelper::getPlugin('system', 'autoscrollspy');
         $this->params = new Registry($plugin->params);
 
@@ -43,16 +43,20 @@ public function onContentBeforeDisplay($context, &$article, &$params, $limitstar
             $wam->registerAndUseScript('plg_system_autoscrollspy', $plugin_path.'/assets/autoscrollspy.js', [], ['defer' => 'true']);
         }
 
-        
-  
+        /* floatpanel props*/
         $floatpanel_position = $this->params->get('floatpanel_position', 'left');
         $floatpanel_width = $this->params->get('floatpanel_width', '200px');
         $floatpanel_offset_top = $this->params->get('floatpanel_offset_top', '250px');
         $floatpanel_paneltitle = $this->params->get('floatpanel_paneltitle', '');
         $floatpanel_autocollapse_width = $this->params->get('floatpanel_autocollapse_width', '768');
         $floatpanel_collapse_toggler_type = $this->params->get('floatpanel_collapse_toggler_type', 'fa-button');
 
-        
+        // handle offset of scroll to heading (pass to js)
+        $scroll_offset_top = $this->params->get('scroll_offset_top', '0');
+        $wam->addInlineScript('
+            const scrollOffsetTop = '.$scroll_offset_top.';
+        ', ['type' => 'text/javascript']);
+
 
         $list_elem = 'ul';
         $li = 'li';
@@ -66,8 +70,8 @@ public function onContentBeforeDisplay($context, &$article, &$params, $limitstar
             $list_elem = 'nav';
             $li = 'span';
             $list_elem_class = 'nav nav-pills flex-column';
-            $a_class = 'nav-link';
-            $a2_class = 'nav-link ms-2';
+            $a_class = 'nav-link autoss-local-link';
+            $a2_class = 'nav-link autoss-local-link ms-2';
         }
 
         //make sure we're on an article page
@@ -88,10 +92,7 @@ public function onContentBeforeDisplay($context, &$article, &$params, $limitstar
 
         //get contents of page
 
-            $article_text = $article->text;
-        
-
-
+        $article_text = $article->text;
         $count = 0;
 
         if($top_is_title == 1){

plugins/system/autoscrollspy/autoscrollspy.xml

@@ -46,6 +46,17 @@
                 <option value="1">JYES</option>
                 <option value="0">JNO</option>
                 </field>
+
+                <field
+                name="scroll_offset_top"
+                type="number"
+                label="PLG_SYSTEM_AUTO_SCROLLSPY_SCROLL_OFFSET_TOP"
+                description="PLG_SYSTEM_AUTO_SCROLLSPY_SCROLL_OFFSET_TOP_DESC"
+                default="0"
+                required="true"
+                />
+
+
                 <field
                 name="level1selector"
                 type="list"

plugins/system/autoscrollspy/language/en-GB/plg_system_autoscrollspy.ini

@@ -37,4 +37,7 @@ PLG_SYSTEM_AUTOSCROLLSPY_FLOATPANEL_COLLAPSETOGGLETEXT = "Article Contents"
 PLG_SYSTEM_AUTO_SCROLLSPY_FIELDSTICKY_NOTE_CONFIG="Sticky Configuration Note"
 PLG_SYSTEM_AUTO_SCROLLSPY_FIELDSTICKY_NOTE_CONFIG_DESC="This <strong>attempts</strong> to make the module sticky, so it sticks to the top of the page as user scrolls. This plugin has no idea what template you're using or how it works. So to achieve this, it sets a parent container of the module to position:sticky. The level selection number below is the number of levels between the scroll spy feature and the module container. Usually it is 1, 2, or 3. If none of these work, you may need to change template settings or contract help."
 PLG_SYSTEM_AUTO_SCROLLSPY_STICKY_CONTAINER_PARENT_LEVEL="Sticky Container Parent Level"
-PLG_SYSTEM_AUTO_SCROLLSPY_STICKY_CONTAINER_PARENT_LEVEL_DESC="The number of levels between the scroll spy feature and the module container. Usually it is 1, 2, or 3. Change value, save plugin, refresh page on front end, and try again until it hopefully works."
+PLG_SYSTEM_AUTO_SCROLLSPY_STICKY_CONTAINER_PARENT_LEVEL_DESC="The number of levels between the scroll spy feature and the module container. Usually it is 1, 2, or 3. Change value, save plugin, refresh page on front end, and try again until it hopefully works."
+
+PLG_SYSTEM_AUTO_SCROLLSPY_SCROLL_OFFSET_TOP="Scroll Offset Top (px)"
+PLG_SYSTEM_AUTO_SCROLLSPY_SCROLL_OFFSET_TOP_DESC="The offset from the top of the page to scroll down to when clicking a link. Default is 0. Increase this if you have a sticky header or something else that covers the top of the page."