diff --git a/asset/css/markbind.css b/asset/css/markbind.css
index e21c7c4808..24462b16fa 100644
--- a/asset/css/markbind.css
+++ b/asset/css/markbind.css
@@ -73,20 +73,6 @@ kbd {
     outline: none !important;
 }
 
-.fa.fa-anchor {
-    color: #ccc;
-    display: inline;
-    font-size: 14px;
-    margin-left: 10px;
-    padding: 3px;
-    text-decoration: none;
-    visibility: hidden;
-}
-
-.fa.fa-anchor:hover {
-    color: #555;
-}
-
 code.hljs.inline {
     background: #f8f8f8;
     color: #333;
diff --git a/asset/js/setup.js b/asset/js/setup.js
index c6b54ef24f..d7910b2eb3 100644
--- a/asset/js/setup.js
+++ b/asset/js/setup.js
@@ -13,63 +13,47 @@ function scrollToUrlAnchorHeading() {
   }
 }
 
-function flattenModals() {
-  jQuery('.modal').each((index, modal) => {
-    jQuery(modal).detach().appendTo(jQuery('#app'));
-  });
-}
-
 function insertCss(cssCode) {
   const newNode = document.createElement('style');
   newNode.innerHTML = cssCode;
   document.getElementsByTagName('head')[0].appendChild(newNode);
 }
 
-function setupAnchors() {
+function setupAnchorsForFixedNavbar() {
   const headerSelector = jQuery('header');
   const isFixed = headerSelector.filter('.header-fixed').length !== 0;
+  if (!isFixed) {
+    return;
+  }
+
   const headerHeight = headerSelector.height();
   const bufferHeight = 1;
-  if (isFixed) {
-    jQuery('.nav-inner').css('padding-top', `calc(${headerHeight}px)`);
-    jQuery('#content-wrapper').css('padding-top', `calc(${headerHeight}px)`);
-    insertCss(
-      `span.anchor {
-      display: block;
-      position: relative;
-      top: calc(-${headerHeight}px - ${bufferHeight}rem)
-      }`,
-    );
-  }
+  jQuery('.nav-inner').css('padding-top', `calc(${headerHeight}px)`);
+  jQuery('#content-wrapper').css('padding-top', `calc(${headerHeight}px)`);
+  insertCss(
+    `span.anchor {
+    display: block;
+    position: relative;
+    top: calc(-${headerHeight}px - ${bufferHeight}rem)
+    }`,
+  );
   jQuery('h1, h2, h3, h4, h5, h6, .header-wrapper').each((index, heading) => {
     if (heading.id) {
-      jQuery(heading).on('mouseenter',
-                         () => jQuery(heading).find('.fa.fa-anchor').css('visibility', 'visible'));
-      jQuery(heading).on('mouseleave',
-                         () => jQuery(heading).find('.fa.fa-anchor').css('visibility', 'hidden'));
-      if (isFixed) {
-        /**
-         * Fixing the top navbar would break anchor navigation,
-         * by creating empty spans above the <h> tag we can prevent
-         * the headings from being covered by the navbar.
-         */
-        const spanId = heading.id;
-        heading.insertAdjacentHTML('beforebegin', `<span id="${spanId}" class="anchor"></span>`);
-        jQuery(heading).removeAttr('id'); // to avoid duplicated id problem
-      }
+      /**
+       * Fixing the top navbar would break anchor navigation,
+       * by creating empty spans above the <h> tag we can prevent
+       * the headings from being covered by the navbar.
+       */
+      const spanId = heading.id;
+      heading.insertAdjacentHTML('beforebegin', `<span id="${spanId}" class="anchor"></span>`);
+      jQuery(heading).removeAttr('id'); // to avoid duplicated id problem
     }
   });
-  jQuery('.fa-anchor').each((index, anchor) => {
-    jQuery(anchor).on('click', function () {
-      window.location.href = jQuery(this).attr('href');
-    });
-  });
 }
 
 function updateSearchData(vm) {
   jQuery.getJSON(`${baseUrl}/siteData.json`)
     .then((siteData) => {
-      // eslint-disable-next-line no-param-reassign
       vm.searchData = siteData.pages;
     });
 }
@@ -97,9 +81,8 @@ function executeAfterCreatedRoutines() {
 }
 
 function executeAfterMountedRoutines() {
-  flattenModals();
   scrollToUrlAnchorHeading();
-  setupAnchors();
+  setupAnchorsForFixedNavbar();
   MarkBind.executeAfterSetupScripts.resolve();
 }
 
diff --git a/docs/userGuide/usingPlugins.md b/docs/userGuide/usingPlugins.md
index e154828d93..a825b84c65 100644
--- a/docs/userGuide/usingPlugins.md
+++ b/docs/userGuide/usingPlugins.md
@@ -117,14 +117,21 @@ Plugins can implement the methods `getLinks` and `getScripts` to add additional
   - `frontMatter`: The frontMatter of the page being processed, in case any frontMatter data is required.
   - `utils`: Object containing the following utility functions
     - `buildStylesheet(href)`: Builds a stylesheet link element with the specified `href`.
-  - Should return an array of string data containing link elements to be added.
+  - Should return an array of strings containing link elements to be added.
 - `getScripts(content, pluginContext, frontMatter, utils)`: Called to get script elements to be added after the body of the page.
   - `content`: The rendered HTML.
   - `pluginContext`: User provided parameters for the plugin. This can be specified in the `site.json`.
   - `frontMatter`: The frontMatter of the page being processed, in case any frontMatter data is required.
   - `utils`: Object containing the following utility functions
     - `buildScript(src)`: Builds a script element with the specified `src`.
-  - Should return an array of string data containing script elements to be added.
+  - Should return an array of strings containing script elements to be added.
+
+<box type="success" header="Local assets">
+<md>
+You can set an absolute or relative file path as the `src` or `href` attribute in your `<script>` or `<link>` tags.
+MarkBind will copy these assets into the output directory and change the `src` or `href` attributes automatically!
+</md>
+</box>
 
 An example of a plugin which adds links and scripts to the page:
 
diff --git a/src/Page.js b/src/Page.js
index 59a67e7a1f..b407bb50ab 100644
--- a/src/Page.js
+++ b/src/Page.js
@@ -40,6 +40,7 @@ const {
   FRONT_MATTER_NONE_ATTR,
   PAGE_NAV_ID,
   PAGE_NAV_TITLE_CLASS,
+  PLUGIN_SITE_ASSET_FOLDER_NAME,
   SITE_NAV_ID,
   SITE_NAV_LIST_CLASS,
   TITLE_PREFIX_SEPARATOR,
@@ -1118,6 +1119,45 @@ class Page {
     return postRenderedContent;
   }
 
+  /**
+   * Resolves a resource specified as an attribute in a html asset tag
+   * (eg. '<script>' or '<link>') provided by a plugin, and copies said asset
+   * into the plugin's asset output folder.
+   * Does nothing if the resource is a url.
+   * @param assetElementHtml The asset element html, as a string, such as '<script src="...">'
+   * @param tagName The name of the resource tag
+   * @param attrName The attribute name where the resource is specified in the tag
+   * @param plugin The plugin object from which to retrieve its asset src and output paths
+   * @param pluginName The name of the plugin, used to determine a unique output path for the plugin
+   * @return String html of the element, with the attribute's asset resolved
+   */
+  getResolvedAssetElement(assetElementHtml, tagName, attrName, plugin, pluginName) {
+    const $ = cheerio.load(assetElementHtml, { xmlMode: false });
+    const el = $(`${tagName}[${attrName}]`);
+
+    el.attr(attrName, (i, assetPath) => {
+      if (!assetPath || utils.isUrl(assetPath)) {
+        return assetPath;
+      }
+
+      const srcPath = path.resolve(plugin._pluginAbsolutePath, assetPath);
+      const srcBaseName = path.basename(srcPath);
+
+      fs.existsAsync(plugin._pluginAssetOutputPath)
+        .then(exists => exists || fs.mkdirp(plugin._pluginAssetOutputPath))
+        .then(() => {
+          const outputPath = path.join(plugin._pluginAssetOutputPath, srcBaseName);
+          fs.copyAsync(srcPath, outputPath, { overwrite: false });
+        })
+        .catch(err => logger.error(`Failed to copy asset ${assetPath} for plugin ${pluginName}\n${err}`));
+
+      return path.posix.join(this.baseUrl || '/', PLUGIN_SITE_ASSET_FOLDER_NAME, pluginName, srcBaseName);
+    });
+
+    return $.html();
+  }
+
+
   /**
    * Collect page content inserted by plugins
    */
@@ -1134,12 +1174,17 @@ class Page {
       if (plugin.getLinks) {
         const pluginLinks = plugin.getLinks(content, this.pluginsContext[pluginName],
                                             this.frontMatter, linkUtils);
-        links = links.concat(pluginLinks);
+        const resolvedPluginLinks = pluginLinks.map(linkHtml =>
+          this.getResolvedAssetElement(linkHtml, 'link', 'href', plugin, pluginName));
+        links = links.concat(resolvedPluginLinks);
       }
+
       if (plugin.getScripts) {
         const pluginScripts = plugin.getScripts(content, this.pluginsContext[pluginName],
                                                 this.frontMatter, scriptUtils);
-        scripts = scripts.concat(pluginScripts);
+        const resolvedPluginScripts = pluginScripts.map(scriptHtml =>
+          this.getResolvedAssetElement(scriptHtml, 'script', 'src', plugin, pluginName));
+        scripts = scripts.concat(resolvedPluginScripts);
       }
     });
     this.asset.pluginLinks = links;
diff --git a/src/Site.js b/src/Site.js
index 6a26f3df56..51fcb4a5ad 100644
--- a/src/Site.js
+++ b/src/Site.js
@@ -56,6 +56,7 @@ const {
   MARKBIND_WEBSITE_URL,
   PAGE_TEMPLATE_NAME,
   PROJECT_PLUGIN_FOLDER_NAME,
+  PLUGIN_SITE_ASSET_FOLDER_NAME,
   SITE_ASSET_FOLDER_NAME,
   SITE_CONFIG_NAME,
   SITE_DATA_NAME,
@@ -892,6 +893,15 @@ class Site {
 
       // eslint-disable-next-line global-require, import/no-dynamic-require
       this.plugins[plugin] = require(pluginPath || plugin);
+
+      if (!this.plugins[plugin].getLinks && !this.plugins[plugin].getScripts) {
+        return;
+      }
+
+      // For resolving plugin asset source paths later
+      this.plugins[plugin]._pluginAbsolutePath = path.dirname(require.resolve(pluginPath || plugin));
+      this.plugins[plugin]._pluginAssetOutputPath = path.resolve(this.outputPath,
+                                                                 PLUGIN_SITE_ASSET_FOLDER_NAME, plugin);
     } catch (e) {
       logger.warn(`Unable to load plugin ${plugin}, skipping`);
     }
diff --git a/src/constants.js b/src/constants.js
index f89bf66f9f..b09527b391 100644
--- a/src/constants.js
+++ b/src/constants.js
@@ -43,6 +43,7 @@ module.exports = {
   SITE_FOLDER_NAME: '_site',
   TEMP_FOLDER_NAME: '.temp',
   TEMPLATE_SITE_ASSET_FOLDER_NAME: 'markbind',
+  PLUGIN_SITE_ASSET_FOLDER_NAME: 'plugins',
 
   ABOUT_MARKDOWN_FILE: 'about.md',
   BUILT_IN_PLUGIN_FOLDER_NAME: 'plugins',
@@ -69,10 +70,6 @@ module.exports = {
   ALGOLIA_JS_URL: 'https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js',
   ALGOLIA_INPUT_SELECTOR: '#algolia-search-input',
 
-  // src/plugins/default/markbind-plugin-anchors.js
-  ANCHOR_HTML: '<a class="fa fa-anchor" href="#"></a>',
-  HEADER_TAGS: 'h1, h2, h3, h4, h5, h6',
-
   // src/plugins/default/markbind-plugin-plantuml.js
   ERR_PROCESSING: 'Error processing',
   ERR_READING: 'Error reading',
diff --git a/src/plugins/codeBlockCopyButtons.js b/src/plugins/codeBlockCopyButtons.js
index 6f74c53fc6..7c11b169d1 100644
--- a/src/plugins/codeBlockCopyButtons.js
+++ b/src/plugins/codeBlockCopyButtons.js
@@ -43,7 +43,7 @@ const copyCodeBlockScript = `<script>
 
 
 module.exports = {
-  getScripts: () => copyCodeBlockScript,
+  getScripts: () => [copyCodeBlockScript],
   postRender: (content) => {
     const $ = cheerio.load(content, { xmlMode: false });
     const codeBlockSelector = 'pre';
diff --git a/src/plugins/default/markbind-plugin-anchors.css b/src/plugins/default/markbind-plugin-anchors.css
new file mode 100644
index 0000000000..b5e8ecef24
--- /dev/null
+++ b/src/plugins/default/markbind-plugin-anchors.css
@@ -0,0 +1,23 @@
+.fa.fa-anchor {
+    color: #ccc;
+    display: inline;
+    font-size: 14px;
+    margin-left: 10px;
+    padding: 3px;
+    text-decoration: none;
+    visibility: hidden;
+}
+
+.fa.fa-anchor:hover {
+    color: #555;
+}
+
+h1:hover > .fa.fa-anchor,
+h2:hover > .fa.fa-anchor,
+h3:hover > .fa.fa-anchor,
+h4:hover > .fa.fa-anchor,
+h5:hover > .fa.fa-anchor,
+h6:hover > .fa.fa-anchor,
+.header-wrapper:hover > .fa.fa-anchor {
+    visibility: visible;
+}
diff --git a/src/plugins/default/markbind-plugin-anchors.js b/src/plugins/default/markbind-plugin-anchors.js
index 11b5bf1353..6dcdc900d5 100644
--- a/src/plugins/default/markbind-plugin-anchors.js
+++ b/src/plugins/default/markbind-plugin-anchors.js
@@ -1,19 +1,18 @@
 const cheerio = module.parent.require('cheerio');
 
-const {
-  ANCHOR_HTML,
-  HEADER_TAGS,
-} = require('../../constants');
+const CSS_FILE_NAME = 'markbind-plugin-anchors.css';
 
 /**
  * Adds anchor links to headers
  */
 module.exports = {
+  getLinks: (content, pluginContext, frontMatter, utils) => [utils.buildStylesheet(CSS_FILE_NAME)],
   postRender: (content) => {
     const $ = cheerio.load(content, { xmlMode: false });
-    $(HEADER_TAGS).each((i, heading) => {
+    $(':header').each((i, heading) => {
       if ($(heading).attr('id')) {
-        $(heading).append(ANCHOR_HTML.replace('#', `#${$(heading).attr('id')}`));
+        $(heading).append(
+          `<a class="fa fa-anchor" href="#${$(heading).attr('id')}" onclick="event.stopPropagation()"></a>`);
       }
     });
     return $.html();
diff --git a/src/plugins/googleAnalytics.js b/src/plugins/googleAnalytics.js
index 8f1bd5094d..35fd1726da 100644
--- a/src/plugins/googleAnalytics.js
+++ b/src/plugins/googleAnalytics.js
@@ -13,5 +13,5 @@ function getGoogleAnalyticsTrackingCode(pluginContext) {
 
 module.exports = {
   // eslint-disable-next-line no-unused-vars
-  getScripts: (content, pluginContext, frontMatter, utils) => getGoogleAnalyticsTrackingCode(pluginContext),
+  getScripts: (content, pluginContext, frontMatter, utils) => [getGoogleAnalyticsTrackingCode(pluginContext)],
 };
diff --git a/src/util/pluginUtil.js b/src/util/pluginUtil.js
index 9d24a89170..e27e3f991e 100644
--- a/src/util/pluginUtil.js
+++ b/src/util/pluginUtil.js
@@ -1,5 +1,5 @@
 const cryptoJS = require('crypto-js');
-const fs = require('fs');
+const fs = require('fs-extra-promise');
 const path = require('path');
 const fsUtil = require('./fsUtil');
 const logger = require('./logger');
@@ -8,7 +8,7 @@ const {
   ERR_READING,
 } = require('../constants');
 
-const pluginUtil = {
+module.exports = {
   /**
    * Returns the file path for the plugin tag.
    * Return based on given name if provided, or it will be based on src.
@@ -49,5 +49,3 @@ const pluginUtil = {
     return $(element).text();
   },
 };
-
-module.exports = pluginUtil;
diff --git a/test/functional/test_site/_markbind/plugins/testMarkbindPlugin.js b/test/functional/test_site/_markbind/plugins/testMarkbindPlugin.js
index e696ada3a8..5b2af6261a 100644
--- a/test/functional/test_site/_markbind/plugins/testMarkbindPlugin.js
+++ b/test/functional/test_site/_markbind/plugins/testMarkbindPlugin.js
@@ -1,4 +1,8 @@
 const cheerio = module.parent.require('cheerio');
+const path = require('path');
+
+const TEST_STYLESHEET_FILE = 'testMarkbindPluginStylesheet.css';
+const TEST_SCRIPT_FILE = 'testMarkbindPluginScript.js';
 
 module.exports = {
   preRender: (content, pluginContext) =>
@@ -8,7 +12,10 @@ module.exports = {
     $('#test-markbind-plugin').append(`${pluginContext.post}`);
     return $.html();
   },
-  getLinks: (content, pluginContext, frontMatter, utils) => [utils.buildStylesheet('STYLESHEET_LINK')],
-  getScripts: (content, pluginContext, frontMatter, utils) =>
-    [utils.buildScript('SCRIPT_LINK'), '<script>alert("hello")</script>'],
+  getLinks: (content, pluginContext, frontMatter, utils) => [utils.buildStylesheet(TEST_STYLESHEET_FILE)],
+  getScripts: (content, pluginContext, frontMatter, utils) => [
+    // Explicitly resolve to test absolute file paths
+    utils.buildScript(path.resolve(__dirname, TEST_SCRIPT_FILE)),
+    '<script>alert("Inline plugin script loaded!")</script>',
+  ],
 };
diff --git a/test/functional/test_site/_markbind/plugins/testMarkbindPluginScript.js b/test/functional/test_site/_markbind/plugins/testMarkbindPluginScript.js
new file mode 100644
index 0000000000..06af89334a
--- /dev/null
+++ b/test/functional/test_site/_markbind/plugins/testMarkbindPluginScript.js
@@ -0,0 +1,2 @@
+// eslint-disable-next-line no-alert
+alert('External plugin script file loaded!');
diff --git a/test/functional/test_site/_markbind/plugins/testMarkbindPluginStylesheet.css b/test/functional/test_site/_markbind/plugins/testMarkbindPluginStylesheet.css
new file mode 100644
index 0000000000..6d91334c05
--- /dev/null
+++ b/test/functional/test_site/_markbind/plugins/testMarkbindPluginStylesheet.css
@@ -0,0 +1,3 @@
+strong {
+    color: #138bf0;
+}
diff --git a/test/functional/test_site/expected/_markbind/plugins/testMarkbindPlugin.js b/test/functional/test_site/expected/_markbind/plugins/testMarkbindPlugin.js
index e696ada3a8..5b2af6261a 100644
--- a/test/functional/test_site/expected/_markbind/plugins/testMarkbindPlugin.js
+++ b/test/functional/test_site/expected/_markbind/plugins/testMarkbindPlugin.js
@@ -1,4 +1,8 @@
 const cheerio = module.parent.require('cheerio');
+const path = require('path');
+
+const TEST_STYLESHEET_FILE = 'testMarkbindPluginStylesheet.css';
+const TEST_SCRIPT_FILE = 'testMarkbindPluginScript.js';
 
 module.exports = {
   preRender: (content, pluginContext) =>
@@ -8,7 +12,10 @@ module.exports = {
     $('#test-markbind-plugin').append(`${pluginContext.post}`);
     return $.html();
   },
-  getLinks: (content, pluginContext, frontMatter, utils) => [utils.buildStylesheet('STYLESHEET_LINK')],
-  getScripts: (content, pluginContext, frontMatter, utils) =>
-    [utils.buildScript('SCRIPT_LINK'), '<script>alert("hello")</script>'],
+  getLinks: (content, pluginContext, frontMatter, utils) => [utils.buildStylesheet(TEST_STYLESHEET_FILE)],
+  getScripts: (content, pluginContext, frontMatter, utils) => [
+    // Explicitly resolve to test absolute file paths
+    utils.buildScript(path.resolve(__dirname, TEST_SCRIPT_FILE)),
+    '<script>alert("Inline plugin script loaded!")</script>',
+  ],
 };
diff --git a/test/functional/test_site/expected/_markbind/plugins/testMarkbindPluginScript.js b/test/functional/test_site/expected/_markbind/plugins/testMarkbindPluginScript.js
new file mode 100644
index 0000000000..06af89334a
--- /dev/null
+++ b/test/functional/test_site/expected/_markbind/plugins/testMarkbindPluginScript.js
@@ -0,0 +1,2 @@
+// eslint-disable-next-line no-alert
+alert('External plugin script file loaded!');
diff --git a/test/functional/test_site/expected/_markbind/plugins/testMarkbindPluginStylesheet.css b/test/functional/test_site/expected/_markbind/plugins/testMarkbindPluginStylesheet.css
new file mode 100644
index 0000000000..6d91334c05
--- /dev/null
+++ b/test/functional/test_site/expected/_markbind/plugins/testMarkbindPluginStylesheet.css
@@ -0,0 +1,3 @@
+strong {
+    color: #138bf0;
+}
diff --git a/test/functional/test_site/expected/bugs/index.html b/test/functional/test_site/expected/bugs/index.html
index 80288776b9..02e6f1500b 100644
--- a/test/functional/test_site/expected/bugs/index.html
+++ b/test/functional/test_site/expected/bugs/index.html
@@ -15,7 +15,8 @@
   <link rel="stylesheet" href="../markbind/css/octicons.css">
   <link rel="stylesheet" href="../markbind/css/github.min.css">
   <link rel="stylesheet" href="../markbind/css/markbind.css">
-  <link rel="stylesheet" href="STYLESHEET_LINK">
+  <link rel="stylesheet" href="/test_site/plugins/testMarkbindPlugin/testMarkbindPluginStylesheet.css">
+  <link rel="stylesheet" href="/test_site/plugins/markbind-plugin-anchors/markbind-plugin-anchors.css">
   <link rel="stylesheet" href="../markbind/layouts/default/styles.css">
   <meta name="default-head-bottom">
   <link rel="icon" href="/test_site/favicon.png">
@@ -63,9 +64,9 @@
   const enableSearch = true
 </script>
 <script src="../markbind/js/setup.js"></script>
-<script src="SCRIPT_LINK"></script>
+<script src="/test_site/plugins/testMarkbindPlugin/testMarkbindPluginScript.js"></script>
 <script>
-  alert("hello")
+  alert("Inline plugin script loaded!")
 </script>
 
 <!-- Global site tag (gtag.js) - Google Analytics -->
diff --git a/test/functional/test_site/expected/index.html b/test/functional/test_site/expected/index.html
index b0e4daac7d..cd35b57563 100644
--- a/test/functional/test_site/expected/index.html
+++ b/test/functional/test_site/expected/index.html
@@ -20,7 +20,8 @@
   <link rel="stylesheet" href="markbind/css/octicons.css">
   <link rel="stylesheet" href="markbind/css/github.min.css">
   <link rel="stylesheet" href="markbind/css/markbind.css">
-  <link rel="stylesheet" href="STYLESHEET_LINK">
+  <link rel="stylesheet" href="/test_site/plugins/testMarkbindPlugin/testMarkbindPluginStylesheet.css">
+  <link rel="stylesheet" href="/test_site/plugins/markbind-plugin-anchors/markbind-plugin-anchors.css">
   <link rel="stylesheet" href="markbind/layouts/default/styles.css">
   <link rel="stylesheet" href="markbind/css/site-nav.css">
   <link rel="stylesheet" href="markbind/css/page-nav.css"><!-- Start of bottom level head file content insertion -->
@@ -49,12 +50,12 @@
         <div class="border-right-grey nav-inner position-sticky slim-scroll">
           <ul class="px-0 site-nav-list">
             <li class="mt-2">
-              <h2 id="navigation">Navigation<a class="fa fa-anchor" href="#navigation"></a></h2>
+              <h2 id="navigation">Navigation<a class="fa fa-anchor" href="#navigation" onclick="event.stopPropagation()"></a></h2>
             </li>
             <li class="mt-2"><a href="/test_site/index.html" class="site-nav__a current">Home 🏠</a></li>
             <li class="mt-2"><a href="/test_site/bugs/index.html" class="site-nav__a">Open Bugs 🐛</a></li>
             <li class="mt-2">
-              <h3 id="testing-site-nav">Testing Site-Nav<a class="fa fa-anchor" href="#testing-site-nav"></a></h3>
+              <h3 id="testing-site-nav">Testing Site-Nav<a class="fa fa-anchor" href="#testing-site-nav" onclick="event.stopPropagation()"></a></h3>
             </li>
             <li class="mt-2"><button class="dropdown-btn dropdown-btn-open"><strong>Dropdown </strong> <span aria-hidden="true" class="glyphicon glyphicon-search"></span> title ✏️
                 <i class="dropdown-btn-icon rotate-icon">
@@ -193,49 +194,49 @@ <h3 id="testing-site-nav">Testing Site-Nav<a class="fa fa-anchor" href="#testing
             <div></div>
             Page Variable Referencing Included Variable
           </div>
-          <h1 id="heading-with-multiple-keywords">Heading with multiple keywords<a class="fa fa-anchor" href="#heading-with-multiple-keywords"></a></h1>
+          <h1 id="heading-with-multiple-keywords">Heading with multiple keywords<a class="fa fa-anchor" href="#heading-with-multiple-keywords" onclick="event.stopPropagation()"></a></h1>
           <p><span class="keyword">keyword 1</span>
             <span class="keyword">keyword 2</span></p>
-          <h1 id="heading-with-keyword-in-panel">Heading with keyword in panel<a class="fa fa-anchor" href="#heading-with-keyword-in-panel"></a></h1>
+          <h1 id="heading-with-keyword-in-panel">Heading with keyword in panel<a class="fa fa-anchor" href="#heading-with-keyword-in-panel" onclick="event.stopPropagation()"></a></h1>
           <panel expanded=""><template slot="_header">
               <p>Panel with keyword</p>
             </template>
             <span class="keyword">panel keyword</span></panel>
           <p><strong>Panel with heading with keyword</strong></p>
           <panel expanded="" id="panel-with-heading"><template slot="_header">
-              <h1 id="panel-with-heading">Panel with heading<a class="fa fa-anchor" href="#panel-with-heading"></a></h1>
+              <h1 id="panel-with-heading">Panel with heading<a class="fa fa-anchor" href="#panel-with-heading" onclick="event.stopPropagation()"></a></h1>
             </template>
             <span class="keyword">panel keyword</span></panel>
           <p><strong>Expanded panel without heading with keyword</strong></p>
           <panel expanded="" id="panel-without-heading-with-keyword"><template slot="_header">
-              <h1 id="panel-without-heading-with-keyword">Panel without heading with keyword<a class="fa fa-anchor" href="#panel-without-heading-with-keyword"></a></h1>
+              <h1 id="panel-without-heading-with-keyword">Panel without heading with keyword<a class="fa fa-anchor" href="#panel-without-heading-with-keyword" onclick="event.stopPropagation()"></a></h1>
             </template>
-            <h1 id="keyword-should-be-tagged-to-this-heading-not-the-panel-heading">Keyword should be tagged to this heading, not the panel heading<a class="fa fa-anchor" href="#keyword-should-be-tagged-to-this-heading-not-the-panel-heading"></a></h1>
+            <h1 id="keyword-should-be-tagged-to-this-heading-not-the-panel-heading">Keyword should be tagged to this heading, not the panel heading<a class="fa fa-anchor" href="#keyword-should-be-tagged-to-this-heading-not-the-panel-heading" onclick="event.stopPropagation()"></a></h1>
             <p><span class="keyword">panel keyword</span></p>
           </panel>
           <p><strong>Unexpanded panel with heading with keyword</strong>
             <panel id="panel-with-heading-with-keyword"><template slot="_header">
-                <h1 id="panel-with-heading-with-keyword">Panel with heading with keyword<a class="fa fa-anchor" href="#panel-with-heading-with-keyword"></a></h1>
+                <h1 id="panel-with-heading-with-keyword">Panel with heading with keyword<a class="fa fa-anchor" href="#panel-with-heading-with-keyword" onclick="event.stopPropagation()"></a></h1>
               </template></panel>
           </p>
-          <h1 id="keyword-should-be-tagged-to-the-panel-heading-not-this-heading">Keyword should be tagged to the panel heading, not this heading<a class="fa fa-anchor" href="#keyword-should-be-tagged-to-the-panel-heading-not-this-heading"></a></h1>
+          <h1 id="keyword-should-be-tagged-to-the-panel-heading-not-this-heading">Keyword should be tagged to the panel heading, not this heading<a class="fa fa-anchor" href="#keyword-should-be-tagged-to-the-panel-heading-not-this-heading" onclick="event.stopPropagation()"></a></h1>
           <p><span class="keyword">panel keyword</span></p>
-          <h1 id="heading-with-included-keyword">Heading with included keyword<a class="fa fa-anchor" href="#heading-with-included-keyword"></a></h1>
+          <h1 id="heading-with-included-keyword">Heading with included keyword<a class="fa fa-anchor" href="#heading-with-included-keyword" onclick="event.stopPropagation()"></a></h1>
           <div>
             <p><span class="keyword">included keyword</span></p>
           </div>
           <div>
-            <h1 id="included-heading">Included Heading<a class="fa fa-anchor" href="#included-heading"></a></h1>
+            <h1 id="included-heading">Included Heading<a class="fa fa-anchor" href="#included-heading" onclick="event.stopPropagation()"></a></h1>
           </div>
           <span class="keyword">Keyword with included heading</span>
-          <h1 id="heading-with-nested-keyword">Heading with nested keyword<a class="fa fa-anchor" href="#heading-with-nested-keyword"></a></h1>
+          <h1 id="heading-with-nested-keyword">Heading with nested keyword<a class="fa fa-anchor" href="#heading-with-nested-keyword" onclick="event.stopPropagation()"></a></h1>
           <div>
             <div>
               <div>
                 <span class="keyword">nested keyword</span></div>
             </div>
           </div>
-          <h1 id="heading-with-hidden-keyword">Heading with hidden keyword<a class="fa fa-anchor" href="#heading-with-hidden-keyword"></a></h1>
+          <h1 id="heading-with-hidden-keyword">Heading with hidden keyword<a class="fa fa-anchor" href="#heading-with-hidden-keyword" onclick="event.stopPropagation()"></a></h1>
           <p><span class="keyword d-none">invisible keyword</span></p>
           <div>
             <p><strong>Div with frontmatter shown tag</strong></p>
@@ -277,22 +278,22 @@ <h1 id="heading-with-hidden-keyword">Heading with hidden keyword<a class="fa fa-
           </div>
           <p><strong>Normal include</strong></p>
           <div>
-            <h3 id="establishing-requirements">Establishing Requirements<a class="fa fa-anchor" href="#establishing-requirements"></a></h3>
+            <h3 id="establishing-requirements">Establishing Requirements<a class="fa fa-anchor" href="#establishing-requirements" onclick="event.stopPropagation()"></a></h3>
             <p>
               <seg id="preview">Requirements gathering, requirements elicitation, requirements analysis,
                 requirements capture are some of the terms commonly <strong>and</strong> interchangeably used to represent the activity
                 of understanding what a software product should do.</seg>
             </p>
             <p>There are many techniques used during a requirements gathering. The following are some of the techniques.</p>
-            <h4 id="brainstorming">Brainstorming<a class="fa fa-anchor" href="#brainstorming"></a></h4>
+            <h4 id="brainstorming">Brainstorming<a class="fa fa-anchor" href="#brainstorming" onclick="event.stopPropagation()"></a></h4>
             <p>Brainstorming is a group activity designed to generate a large number of diverse and creative ideas for the solution
               of a problem. In a brainstorming session there are no &quot;bad&quot; ideas.
               The aim is to generate ideas; not to validate them. Brainstorming encourages you to &quot;think outside the box&quot; and
               put &quot;crazy&quot; ideas on the table without fear of rejection.</p>
-            <h4 id="user-surveys">User surveys<a class="fa fa-anchor" href="#user-surveys"></a></h4>
+            <h4 id="user-surveys">User surveys<a class="fa fa-anchor" href="#user-surveys" onclick="event.stopPropagation()"></a></h4>
             <p>Carefully designed questionnaires can be used to solicit responses and opinions from a large number of users regarding
               any current system or a new innovation.</p>
-            <h4 id="focus-groups">Focus groups<a class="fa fa-anchor" href="#focus-groups"></a></h4>
+            <h4 id="focus-groups">Focus groups<a class="fa fa-anchor" href="#focus-groups" onclick="event.stopPropagation()"></a></h4>
             <p>Focus groups are a kind of informal interview within an interactive group setting.
               A <span data-mb-component-type="tooltip" v-b-tooltip.hover.top.html="tooltipInnerContentGetter" class="trigger"><span data-mb-html-for="_content">e.g. potential users, beta testers</span>group of people</span>
               are asked about their understanding of a specific issue or a process.
@@ -314,7 +315,7 @@ <h4 id="focus-groups">Focus groups<a class="fa fa-anchor" href="#focus-groups"><
             </p>
           </div>
           <div name="Referencing specified path in boilerplate">
-            <h1 id="path-within-the-boilerplate-folder-is-separately-specified">Path within the boilerplate folder is separately specified<a class="fa fa-anchor" href="#path-within-the-boilerplate-folder-is-separately-specified"></a></h1>
+            <h1 id="path-within-the-boilerplate-folder-is-separately-specified">Path within the boilerplate folder is separately specified<a class="fa fa-anchor" href="#path-within-the-boilerplate-folder-is-separately-specified" onclick="event.stopPropagation()"></a></h1>
             <p>Like static include, pages within the site should be able to use files located in folders within boilerplate.</p>
             <p>Also, the boilerplate file name (e.g. <code>inside.md</code>) and the file that it is supposed to act as (<code>notInside.md</code>) can be different.</p>
             <p>This file should behaves as if it is in the <code>requirements</code> folder:</p>
@@ -351,7 +352,7 @@ <h1 id="path-within-the-boilerplate-folder-is-separately-specified">Path within
           <p><strong>Include from another Markbind site</strong></p>
           <div>
             <p>This is a page from another Markbind site.</p>
-            <h2 id="feature-list">Feature list<a class="fa fa-anchor" href="#feature-list"></a></h2>
+            <h2 id="feature-list">Feature list<a class="fa fa-anchor" href="#feature-list" onclick="event.stopPropagation()"></a></h2>
             <p>It is a list of features (or functionalities) grouped according to some criteria such as priority
               (e.g. must-have, nice-to-have, etc. ), order of delivery, object or process related
               (e.g. order-related, invoice-related, etc.).
@@ -523,7 +524,7 @@ <h2 id="feature-list">Feature list<a class="fa fa-anchor" href="#feature-list"><
             </span></panel>
           <p><strong>Panel without src</strong></p>
           <panel expanded="" id="panel-without-src-header"><template slot="_header">
-              <h2 id="panel-without-src-header">Panel without src header<a class="fa fa-anchor" href="#panel-without-src-header"></a></h2>
+              <h2 id="panel-without-src-header">Panel without src header<a class="fa fa-anchor" href="#panel-without-src-header" onclick="event.stopPropagation()"></a></h2>
             </template>
             <div>
               <p><strong>Panel without src content heading</strong></p>
@@ -531,65 +532,65 @@ <h2 id="panel-without-src-header">Panel without src header<a class="fa fa-anchor
           </panel>
           <p><strong>Panel with normal src</strong></p>
           <panel src="/test_site/testPanels/PanelNormalSource._include_.html" expanded="" id="panel-with-normal-src-header"><template slot="_header">
-              <h2 id="panel-with-normal-src-header">Panel with normal src header<a class="fa fa-anchor" href="#panel-with-normal-src-header"></a></h2>
+              <h2 id="panel-with-normal-src-header">Panel with normal src header<a class="fa fa-anchor" href="#panel-with-normal-src-header" onclick="event.stopPropagation()"></a></h2>
             </template></panel>
           <p><strong>Panel with src from a page segment</strong></p>
           <panel src="/test_site/testPanels/PanelSourceContainsSegment._include_.html#segment" expanded="" fragment="segment" id="panel-with-src-from-a-page-segment-header"><template slot="_header">
-              <h2 id="panel-with-src-from-a-page-segment-header">Panel with src from a page segment header<a class="fa fa-anchor" href="#panel-with-src-from-a-page-segment-header"></a></h2>
+              <h2 id="panel-with-src-from-a-page-segment-header">Panel with src from a page segment header<a class="fa fa-anchor" href="#panel-with-src-from-a-page-segment-header" onclick="event.stopPropagation()"></a></h2>
             </template></panel>
           <p><strong>Panel with boilerplate</strong></p>
           <panel src="/test_site/testPanels/boilerTestPanel._include_.html" expanded="" id="boilerplate-referencing"><template slot="_header">
-              <h2 id="boilerplate-referencing">Boilerplate referencing<a class="fa fa-anchor" href="#boilerplate-referencing"></a></h2>
+              <h2 id="boilerplate-referencing">Boilerplate referencing<a class="fa fa-anchor" href="#boilerplate-referencing" onclick="event.stopPropagation()"></a></h2>
             </template></panel>
           <panel src="/test_site/testPanels/notInside._include_.html" expanded="" id="referencing-specified-path-in-boilerplate"><template slot="_header">
-              <h2 id="referencing-specified-path-in-boilerplate">Referencing specified path in boilerplate<a class="fa fa-anchor" href="#referencing-specified-path-in-boilerplate"></a></h2>
+              <h2 id="referencing-specified-path-in-boilerplate">Referencing specified path in boilerplate<a class="fa fa-anchor" href="#referencing-specified-path-in-boilerplate" onclick="event.stopPropagation()"></a></h2>
             </template></panel>
           <p><strong>Nested panel</strong></p>
           <panel src="/test_site/testPanels/NestedPanel._include_.html" expanded="" id="outer-nested-panel"><template slot="_header">
-              <h2 id="outer-nested-panel">Outer nested panel<a class="fa fa-anchor" href="#outer-nested-panel"></a></h2>
+              <h2 id="outer-nested-panel">Outer nested panel<a class="fa fa-anchor" href="#outer-nested-panel" onclick="event.stopPropagation()"></a></h2>
             </template></panel>
           <p><strong>Nested panel without src</strong></p>
           <panel expanded="" id="outer-nested-panel-without-src"><template slot="_header">
-              <h2 id="outer-nested-panel-without-src">Outer nested panel without src<a class="fa fa-anchor" href="#outer-nested-panel-without-src"></a></h2>
+              <h2 id="outer-nested-panel-without-src">Outer nested panel without src<a class="fa fa-anchor" href="#outer-nested-panel-without-src" onclick="event.stopPropagation()"></a></h2>
             </template>
             <p><strong>Panel content of outer nested panel</strong></p>
             <panel expanded="" id="inner-panel-header-without-src"><template slot="_header">
-                <h2 id="inner-panel-header-without-src">Inner panel header without src<a class="fa fa-anchor" href="#inner-panel-header-without-src"></a></h2>
+                <h2 id="inner-panel-header-without-src">Inner panel header without src<a class="fa fa-anchor" href="#inner-panel-header-without-src" onclick="event.stopPropagation()"></a></h2>
               </template>
               <p><strong>Panel content of inner nested panel</strong></p>
             </panel>
           </panel>
           <p><strong>Panel with src from another Markbind site</strong></p>
           <panel src="/test_site/sub_site/index._include_.html" expanded="" id="panel-with-src-from-another-markbind-site-header"><template slot="_header">
-              <h2 id="panel-with-src-from-another-markbind-site-header">Panel with src from another Markbind site header<a class="fa fa-anchor" href="#panel-with-src-from-another-markbind-site-header"></a></h2>
+              <h2 id="panel-with-src-from-another-markbind-site-header">Panel with src from another Markbind site header<a class="fa fa-anchor" href="#panel-with-src-from-another-markbind-site-header" onclick="event.stopPropagation()"></a></h2>
             </template></panel>
           <panel src="/test_site/sub_site/testReuse._include_.html" expanded="" id="panel-with-src-from-another-markbind-site-header-2"><template slot="_header">
-              <h2 id="panel-with-src-from-another-markbind-site-header-2">Panel with src from another Markbind site header<a class="fa fa-anchor" href="#panel-with-src-from-another-markbind-site-header-2"></a></h2>
+              <h2 id="panel-with-src-from-another-markbind-site-header-2">Panel with src from another Markbind site header<a class="fa fa-anchor" href="#panel-with-src-from-another-markbind-site-header-2" onclick="event.stopPropagation()"></a></h2>
             </template></panel>
         </div>
         <p><strong>Modal with panel inside</strong></p>
         <p><span for="modal-with-panel" v-b-popover.hover.top.html="popoverGenerator" v-b-tooltip.hover.top.html="tooltipContentGetter" v-on:mouseover="$refs['modal-with-panel'].show()" class="trigger">trigger</span></p>
         <b-modal id="modal-with-panel" hide-footer="" size="" modal-class="mb-zoom" ref="modal-with-panel"><template slot="modal-title">modal title with panel inside</template>
           <panel expanded="" id="panel-inside-modal"><template slot="_header">
-              <h2 id="panel-inside-modal">Panel inside modal<a class="fa fa-anchor" href="#panel-inside-modal"></a></h2>
+              <h2 id="panel-inside-modal">Panel inside modal<a class="fa fa-anchor" href="#panel-inside-modal" onclick="event.stopPropagation()"></a></h2>
             </template>
             <p><strong>Panel content inside modal</strong></p>
           </panel>
         </b-modal>
         <p><strong>Unexpanded panel</strong></p>
         <panel id="unexpanded-panel-header"><template slot="_header">
-            <h2 id="unexpanded-panel-header">Unexpanded panel header<a class="fa fa-anchor" href="#unexpanded-panel-header"></a></h2>
+            <h2 id="unexpanded-panel-header">Unexpanded panel header<a class="fa fa-anchor" href="#unexpanded-panel-header" onclick="event.stopPropagation()"></a></h2>
           </template>
           <p><strong>Panel content of unexpanded panel should not appear in search data</strong></p>
           <panel expanded="" id="panel-header-inside-unexpanded-panel-should-not-appear-in-search-data"><template slot="_header">
-              <h2 id="panel-header-inside-unexpanded-panel-should-not-appear-in-search-data">Panel header inside unexpanded panel should not appear in search data<a class="fa fa-anchor" href="#panel-header-inside-unexpanded-panel-should-not-appear-in-search-data"></a></h2>
+              <h2 id="panel-header-inside-unexpanded-panel-should-not-appear-in-search-data">Panel header inside unexpanded panel should not appear in search data<a class="fa fa-anchor" href="#panel-header-inside-unexpanded-panel-should-not-appear-in-search-data" onclick="event.stopPropagation()"></a></h2>
             </template>
             <p><strong>Panel content inside unexpanded panel should not appear in search data</strong></p>
           </panel>
         </panel>
         <p><strong>Test plugin in markbind/plugins</strong></p>
         <div id="test-markbind-plugin">
-          <h1 id="markbind-plugin-pre-render">Markbind Plugin Pre-render<a class="fa fa-anchor" href="#markbind-plugin-pre-render"></a></h1>
+          <h1 id="markbind-plugin-pre-render">Markbind Plugin Pre-render<a class="fa fa-anchor" href="#markbind-plugin-pre-render" onclick="event.stopPropagation()"></a></h1>
           <p>Node Modules Plugin Post-render</p>
         </div>
         <p><strong>Test search indexing</strong></p>
@@ -627,8 +628,8 @@ <h1 id="markbind-plugin-pre-render">Markbind Plugin Pre-render<a class="fa fa-an
             <pic src="/test_site/diagrams/object.png"></pic>
           </p>
         </div>
-        <h2 class="no-index" id="level-2-header-inside-headingsearchindex-with-no-index-attribute-should-not-be-indexed">Level 2 header (inside headingSearchIndex) with no-index attribute should not be indexed<a class="fa fa-anchor" href="#level-2-header-inside-headingsearchindex-with-no-index-attribute-should-not-be-indexed"></a></h2>
-        <h6 class="always-index" id="level-6-header-outside-headingsearchindex-with-always-index-attribute-should-be-indexed">Level 6 header (outside headingSearchIndex) with always-index attribute should be indexed<a class="fa fa-anchor" href="#level-6-header-outside-headingsearchindex-with-always-index-attribute-should-be-indexed"></a></h6>
+        <h2 class="no-index" id="level-2-header-inside-headingsearchindex-with-no-index-attribute-should-not-be-indexed">Level 2 header (inside headingSearchIndex) with no-index attribute should not be indexed<a class="fa fa-anchor" href="#level-2-header-inside-headingsearchindex-with-no-index-attribute-should-not-be-indexed" onclick="event.stopPropagation()"></a></h2>
+        <h6 class="always-index" id="level-6-header-outside-headingsearchindex-with-always-index-attribute-should-be-indexed">Level 6 header (outside headingSearchIndex) with always-index attribute should be indexed<a class="fa fa-anchor" href="#level-6-header-outside-headingsearchindex-with-always-index-attribute-should-be-indexed" onclick="event.stopPropagation()"></a></h6>
         <hr class="footnotes-sep">
         <section class="footnotes">
           <ol class="footnotes-list">
@@ -721,7 +722,7 @@ <h6 class="always-index" id="level-6-header-outside-headingsearchindex-with-alwa
       </nav>
     </div>
     <footer>
-      <h1 id="heading-in-footer-should-not-be-indexed">Heading in footer should not be indexed<a class="fa fa-anchor" href="#heading-in-footer-should-not-be-indexed"></a></h1>
+      <h1 id="heading-in-footer-should-not-be-indexed">Heading in footer should not be indexed<a class="fa fa-anchor" href="#heading-in-footer-should-not-be-indexed" onclick="event.stopPropagation()"></a></h1>
       <div class="text-center">
         This is a dynamic height footer that supports markdown <span>😄</span>!
       </div>
@@ -738,9 +739,9 @@ <h1 id="heading-in-footer-should-not-be-indexed">Heading in footer should not be
   const enableSearch = true
 </script>
 <script src="markbind/js/setup.js"></script>
-<script src="SCRIPT_LINK"></script>
+<script src="/test_site/plugins/testMarkbindPlugin/testMarkbindPluginScript.js"></script>
 <script>
-  alert("hello")
+  alert("Inline plugin script loaded!")
 </script>
 
 <!-- Global site tag (gtag.js) - Google Analytics -->
diff --git a/test/functional/test_site/expected/markbind/css/markbind.css b/test/functional/test_site/expected/markbind/css/markbind.css
index e21c7c4808..24462b16fa 100644
--- a/test/functional/test_site/expected/markbind/css/markbind.css
+++ b/test/functional/test_site/expected/markbind/css/markbind.css
@@ -73,20 +73,6 @@ kbd {
     outline: none !important;
 }
 
-.fa.fa-anchor {
-    color: #ccc;
-    display: inline;
-    font-size: 14px;
-    margin-left: 10px;
-    padding: 3px;
-    text-decoration: none;
-    visibility: hidden;
-}
-
-.fa.fa-anchor:hover {
-    color: #555;
-}
-
 code.hljs.inline {
     background: #f8f8f8;
     color: #333;
diff --git a/test/functional/test_site/expected/markbind/js/setup.js b/test/functional/test_site/expected/markbind/js/setup.js
index c6b54ef24f..d7910b2eb3 100644
--- a/test/functional/test_site/expected/markbind/js/setup.js
+++ b/test/functional/test_site/expected/markbind/js/setup.js
@@ -13,63 +13,47 @@ function scrollToUrlAnchorHeading() {
   }
 }
 
-function flattenModals() {
-  jQuery('.modal').each((index, modal) => {
-    jQuery(modal).detach().appendTo(jQuery('#app'));
-  });
-}
-
 function insertCss(cssCode) {
   const newNode = document.createElement('style');
   newNode.innerHTML = cssCode;
   document.getElementsByTagName('head')[0].appendChild(newNode);
 }
 
-function setupAnchors() {
+function setupAnchorsForFixedNavbar() {
   const headerSelector = jQuery('header');
   const isFixed = headerSelector.filter('.header-fixed').length !== 0;
+  if (!isFixed) {
+    return;
+  }
+
   const headerHeight = headerSelector.height();
   const bufferHeight = 1;
-  if (isFixed) {
-    jQuery('.nav-inner').css('padding-top', `calc(${headerHeight}px)`);
-    jQuery('#content-wrapper').css('padding-top', `calc(${headerHeight}px)`);
-    insertCss(
-      `span.anchor {
-      display: block;
-      position: relative;
-      top: calc(-${headerHeight}px - ${bufferHeight}rem)
-      }`,
-    );
-  }
+  jQuery('.nav-inner').css('padding-top', `calc(${headerHeight}px)`);
+  jQuery('#content-wrapper').css('padding-top', `calc(${headerHeight}px)`);
+  insertCss(
+    `span.anchor {
+    display: block;
+    position: relative;
+    top: calc(-${headerHeight}px - ${bufferHeight}rem)
+    }`,
+  );
   jQuery('h1, h2, h3, h4, h5, h6, .header-wrapper').each((index, heading) => {
     if (heading.id) {
-      jQuery(heading).on('mouseenter',
-                         () => jQuery(heading).find('.fa.fa-anchor').css('visibility', 'visible'));
-      jQuery(heading).on('mouseleave',
-                         () => jQuery(heading).find('.fa.fa-anchor').css('visibility', 'hidden'));
-      if (isFixed) {
-        /**
-         * Fixing the top navbar would break anchor navigation,
-         * by creating empty spans above the <h> tag we can prevent
-         * the headings from being covered by the navbar.
-         */
-        const spanId = heading.id;
-        heading.insertAdjacentHTML('beforebegin', `<span id="${spanId}" class="anchor"></span>`);
-        jQuery(heading).removeAttr('id'); // to avoid duplicated id problem
-      }
+      /**
+       * Fixing the top navbar would break anchor navigation,
+       * by creating empty spans above the <h> tag we can prevent
+       * the headings from being covered by the navbar.
+       */
+      const spanId = heading.id;
+      heading.insertAdjacentHTML('beforebegin', `<span id="${spanId}" class="anchor"></span>`);
+      jQuery(heading).removeAttr('id'); // to avoid duplicated id problem
     }
   });
-  jQuery('.fa-anchor').each((index, anchor) => {
-    jQuery(anchor).on('click', function () {
-      window.location.href = jQuery(this).attr('href');
-    });
-  });
 }
 
 function updateSearchData(vm) {
   jQuery.getJSON(`${baseUrl}/siteData.json`)
     .then((siteData) => {
-      // eslint-disable-next-line no-param-reassign
       vm.searchData = siteData.pages;
     });
 }
@@ -97,9 +81,8 @@ function executeAfterCreatedRoutines() {
 }
 
 function executeAfterMountedRoutines() {
-  flattenModals();
   scrollToUrlAnchorHeading();
-  setupAnchors();
+  setupAnchorsForFixedNavbar();
   MarkBind.executeAfterSetupScripts.resolve();
 }
 
diff --git a/test/functional/test_site/expected/plugins/markbind-plugin-anchors/markbind-plugin-anchors.css b/test/functional/test_site/expected/plugins/markbind-plugin-anchors/markbind-plugin-anchors.css
new file mode 100644
index 0000000000..b5e8ecef24
--- /dev/null
+++ b/test/functional/test_site/expected/plugins/markbind-plugin-anchors/markbind-plugin-anchors.css
@@ -0,0 +1,23 @@
+.fa.fa-anchor {
+    color: #ccc;
+    display: inline;
+    font-size: 14px;
+    margin-left: 10px;
+    padding: 3px;
+    text-decoration: none;
+    visibility: hidden;
+}
+
+.fa.fa-anchor:hover {
+    color: #555;
+}
+
+h1:hover > .fa.fa-anchor,
+h2:hover > .fa.fa-anchor,
+h3:hover > .fa.fa-anchor,
+h4:hover > .fa.fa-anchor,
+h5:hover > .fa.fa-anchor,
+h6:hover > .fa.fa-anchor,
+.header-wrapper:hover > .fa.fa-anchor {
+    visibility: visible;
+}
diff --git a/test/functional/test_site/expected/plugins/testMarkbindPlugin/testMarkbindPluginScript.js b/test/functional/test_site/expected/plugins/testMarkbindPlugin/testMarkbindPluginScript.js
new file mode 100644
index 0000000000..06af89334a
--- /dev/null
+++ b/test/functional/test_site/expected/plugins/testMarkbindPlugin/testMarkbindPluginScript.js
@@ -0,0 +1,2 @@
+// eslint-disable-next-line no-alert
+alert('External plugin script file loaded!');
diff --git a/test/functional/test_site/expected/plugins/testMarkbindPlugin/testMarkbindPluginStylesheet.css b/test/functional/test_site/expected/plugins/testMarkbindPlugin/testMarkbindPluginStylesheet.css
new file mode 100644
index 0000000000..6d91334c05
--- /dev/null
+++ b/test/functional/test_site/expected/plugins/testMarkbindPlugin/testMarkbindPluginStylesheet.css
@@ -0,0 +1,3 @@
+strong {
+    color: #138bf0;
+}
diff --git a/test/functional/test_site/expected/requirements/SpecifyingRequirements._include_.html b/test/functional/test_site/expected/requirements/SpecifyingRequirements._include_.html
index 9201ebe7d7..dd626ff69e 100644
--- a/test/functional/test_site/expected/requirements/SpecifyingRequirements._include_.html
+++ b/test/functional/test_site/expected/requirements/SpecifyingRequirements._include_.html
@@ -1,4 +1,4 @@
-<h1 id="specifying-requirements">Specifying requirements<a class="fa fa-anchor" href="#specifying-requirements"></a></h1>
+<h1 id="specifying-requirements">Specifying requirements<a class="fa fa-anchor" href="#specifying-requirements" onclick="event.stopPropagation()"></a></h1>
 <p>
   <seg id="preview">As we establish requirements, they should be recorded in some way for future reference,
     usually called a requirement specification. Furthermore, it is advisable to show these requirements to stakeholders,
@@ -7,12 +7,12 @@ <h1 id="specifying-requirements">Specifying requirements<a class="fa fa-anchor"
 </p>
 <p>Given next are some tools and techniques that can be used to specify requirements.
   Note that they can also be used for establishing requirements too.</p>
-<h2 id="textual-descriptions-unstructured-prose">Textual descriptions (unstructured prose)<a class="fa fa-anchor" href="#textual-descriptions-unstructured-prose"></a></h2>
+<h2 id="textual-descriptions-unstructured-prose">Textual descriptions (unstructured prose)<a class="fa fa-anchor" href="#textual-descriptions-unstructured-prose" onclick="event.stopPropagation()"></a></h2>
 <p>This is the most straight forward way of describing requirements.
   A textual description can be used to give a quick overview of the domain/system that is understandable to both
   the users and the development team. Textual descriptions are especially useful when describing the vision of a product.
   However, lengthy textual descriptions are hard to follow.</p>
-<h2 id="feature-list">Feature list<a class="fa fa-anchor" href="#feature-list"></a></h2>
+<h2 id="feature-list">Feature list<a class="fa fa-anchor" href="#feature-list" onclick="event.stopPropagation()"></a></h2>
 <p>It is a list of features (or functionalities) grouped according to some criteria such as priority
   (e.g. must-have, nice-to-have, etc. ), order of delivery, object or process related
   (e.g. order-related, invoice-related, etc.).
diff --git a/test/functional/test_site/expected/sub_site/index._include_.html b/test/functional/test_site/expected/sub_site/index._include_.html
index d8882f7f54..cdbef48fbf 100644
--- a/test/functional/test_site/expected/sub_site/index._include_.html
+++ b/test/functional/test_site/expected/sub_site/index._include_.html
@@ -1,5 +1,5 @@
 <p>This is a page from another Markbind site.</p>
-<h2 id="feature-list">Feature list<a class="fa fa-anchor" href="#feature-list"></a></h2>
+<h2 id="feature-list">Feature list<a class="fa fa-anchor" href="#feature-list" onclick="event.stopPropagation()"></a></h2>
 <p>It is a list of features (or functionalities) grouped according to some criteria such as priority
   (e.g. must-have, nice-to-have, etc. ), order of delivery, object or process related
   (e.g. order-related, invoice-related, etc.).
diff --git a/test/functional/test_site/expected/sub_site/index.html b/test/functional/test_site/expected/sub_site/index.html
index 27efbb5868..f0ff3e57da 100644
--- a/test/functional/test_site/expected/sub_site/index.html
+++ b/test/functional/test_site/expected/sub_site/index.html
@@ -15,7 +15,8 @@
   <link rel="stylesheet" href="../markbind/css/octicons.css">
   <link rel="stylesheet" href="../markbind/css/github.min.css">
   <link rel="stylesheet" href="../markbind/css/markbind.css">
-  <link rel="stylesheet" href="STYLESHEET_LINK">
+  <link rel="stylesheet" href="/test_site/plugins/testMarkbindPlugin/testMarkbindPluginStylesheet.css">
+  <link rel="stylesheet" href="/test_site/plugins/markbind-plugin-anchors/markbind-plugin-anchors.css">
   <link rel="stylesheet" href="../markbind/layouts/default/styles.css">
   <meta name="default-head-bottom">
   <link rel="icon" href="/test_site/favicon.png">
@@ -26,7 +27,7 @@
     <div id="flex-body">
       <div id="content-wrapper">
         <p>This is a page from another Markbind site.</p>
-        <h2 id="feature-list">Feature list<a class="fa fa-anchor" href="#feature-list"></a></h2>
+        <h2 id="feature-list">Feature list<a class="fa fa-anchor" href="#feature-list" onclick="event.stopPropagation()"></a></h2>
         <p>It is a list of features (or functionalities) grouped according to some criteria such as priority
           (e.g. must-have, nice-to-have, etc. ), order of delivery, object or process related
           (e.g. order-related, invoice-related, etc.).
@@ -60,9 +61,9 @@ <h2 id="feature-list">Feature list<a class="fa fa-anchor" href="#feature-list"><
   const enableSearch = true
 </script>
 <script src="../markbind/js/setup.js"></script>
-<script src="SCRIPT_LINK"></script>
+<script src="/test_site/plugins/testMarkbindPlugin/testMarkbindPluginScript.js"></script>
 <script>
-  alert("hello")
+  alert("Inline plugin script loaded!")
 </script>
 
 <!-- Global site tag (gtag.js) - Google Analytics -->
diff --git a/test/functional/test_site/expected/sub_site/nested_sub_site/index.html b/test/functional/test_site/expected/sub_site/nested_sub_site/index.html
index b88b6d4452..2e72d21d9c 100644
--- a/test/functional/test_site/expected/sub_site/nested_sub_site/index.html
+++ b/test/functional/test_site/expected/sub_site/nested_sub_site/index.html
@@ -15,7 +15,8 @@
   <link rel="stylesheet" href="../../markbind/css/octicons.css">
   <link rel="stylesheet" href="../../markbind/css/github.min.css">
   <link rel="stylesheet" href="../../markbind/css/markbind.css">
-  <link rel="stylesheet" href="STYLESHEET_LINK">
+  <link rel="stylesheet" href="/test_site/plugins/testMarkbindPlugin/testMarkbindPluginStylesheet.css">
+  <link rel="stylesheet" href="/test_site/plugins/markbind-plugin-anchors/markbind-plugin-anchors.css">
   <link rel="stylesheet" href="../../markbind/layouts/default/styles.css">
   <meta name="default-head-bottom">
   <link rel="icon" href="/test_site/favicon.png">
@@ -52,9 +53,9 @@
   const enableSearch = true
 </script>
 <script src="../../markbind/js/setup.js"></script>
-<script src="SCRIPT_LINK"></script>
+<script src="/test_site/plugins/testMarkbindPlugin/testMarkbindPluginScript.js"></script>
 <script>
-  alert("hello")
+  alert("Inline plugin script loaded!")
 </script>
 
 <!-- Global site tag (gtag.js) - Google Analytics -->
diff --git a/test/functional/test_site/expected/testAfterSetup.html b/test/functional/test_site/expected/testAfterSetup.html
index 8d53a28531..88bcd25360 100644
--- a/test/functional/test_site/expected/testAfterSetup.html
+++ b/test/functional/test_site/expected/testAfterSetup.html
@@ -15,7 +15,8 @@
   <link rel="stylesheet" href="markbind/css/octicons.css">
   <link rel="stylesheet" href="markbind/css/github.min.css">
   <link rel="stylesheet" href="markbind/css/markbind.css">
-  <link rel="stylesheet" href="STYLESHEET_LINK">
+  <link rel="stylesheet" href="/test_site/plugins/testMarkbindPlugin/testMarkbindPluginStylesheet.css">
+  <link rel="stylesheet" href="/test_site/plugins/markbind-plugin-anchors/markbind-plugin-anchors.css">
   <link rel="stylesheet" href="markbind/layouts/testAfterSetup/styles.css">
   <meta name="head-bottom">
   <link rel="icon" href="/test_site/favicon.png">
@@ -50,9 +51,9 @@
   const enableSearch = true
 </script>
 <script src="markbind/js/setup.js"></script>
-<script src="SCRIPT_LINK"></script>
+<script src="/test_site/plugins/testMarkbindPlugin/testMarkbindPluginScript.js"></script>
 <script>
-  alert("hello")
+  alert("Inline plugin script loaded!")
 </script>
 
 <!-- Global site tag (gtag.js) - Google Analytics -->
diff --git a/test/functional/test_site/expected/testAnchorGeneration.html b/test/functional/test_site/expected/testAnchorGeneration.html
index 484ef2a857..66dc6e9ecc 100644
--- a/test/functional/test_site/expected/testAnchorGeneration.html
+++ b/test/functional/test_site/expected/testAnchorGeneration.html
@@ -15,7 +15,8 @@
   <link rel="stylesheet" href="markbind/css/octicons.css">
   <link rel="stylesheet" href="markbind/css/github.min.css">
   <link rel="stylesheet" href="markbind/css/markbind.css">
-  <link rel="stylesheet" href="STYLESHEET_LINK">
+  <link rel="stylesheet" href="/test_site/plugins/testMarkbindPlugin/testMarkbindPluginStylesheet.css">
+  <link rel="stylesheet" href="/test_site/plugins/markbind-plugin-anchors/markbind-plugin-anchors.css">
   <link rel="stylesheet" href="markbind/layouts/default/styles.css">
   <meta name="default-head-bottom">
   <link rel="icon" href="/test_site/favicon.png">
@@ -25,15 +26,15 @@
   <div id="app">
     <div id="flex-body">
       <div id="content-wrapper">
-        <h1 id="root-file">Root file<a class="fa fa-anchor" href="#root-file"></a></h1>
-        <h1 id="should-have-anchor">should have anchor<a class="fa fa-anchor" href="#should-have-anchor"></a></h1>
-        <h2 id="should-have-anchor-2">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-2"></a></h2>
-        <h3 id="should-have-anchor-3">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-3"></a></h3>
-        <h4 id="should-have-anchor-4">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-4"></a></h4>
-        <h5 id="should-have-anchor-5">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-5"></a></h5>
-        <h6 id="should-have-anchor-6">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-6"></a></h6>
+        <h1 id="root-file">Root file<a class="fa fa-anchor" href="#root-file" onclick="event.stopPropagation()"></a></h1>
+        <h1 id="should-have-anchor">should have anchor<a class="fa fa-anchor" href="#should-have-anchor" onclick="event.stopPropagation()"></a></h1>
+        <h2 id="should-have-anchor-2">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-2" onclick="event.stopPropagation()"></a></h2>
+        <h3 id="should-have-anchor-3">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-3" onclick="event.stopPropagation()"></a></h3>
+        <h4 id="should-have-anchor-4">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-4" onclick="event.stopPropagation()"></a></h4>
+        <h5 id="should-have-anchor-5">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-5" onclick="event.stopPropagation()"></a></h5>
+        <h6 id="should-have-anchor-6">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-6" onclick="event.stopPropagation()"></a></h6>
         <panel id="should-have-anchor-7"><template slot="_header">
-            <h4 id="should-have-anchor-7">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-7"></a></h4>
+            <h4 id="should-have-anchor-7">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-7" onclick="event.stopPropagation()"></a></h4>
           </template>
           Lorem ipsum
         </panel>
@@ -41,36 +42,36 @@ <h4 id="should-have-anchor-7">should have anchor<a class="fa fa-anchor" href="#s
             <p>Collapsed</p>
           </template>
           <p>Headings in a collapsed-by-default panel should <strong>not</strong> have anchors</p>
-          <h1 id="should-not-have-anchor">should not have anchor<a class="fa fa-anchor" href="#should-not-have-anchor"></a></h1>
-          <h2 id="should-not-have-anchor-2">should not have anchor<a class="fa fa-anchor" href="#should-not-have-anchor-2"></a></h2>
-          <h3 id="should-not-have-anchor-3">should not have anchor<a class="fa fa-anchor" href="#should-not-have-anchor-3"></a></h3>
-          <h4 id="should-not-have-anchor-4">should not have anchor<a class="fa fa-anchor" href="#should-not-have-anchor-4"></a></h4>
-          <h5 id="should-not-have-anchor-5">should not have anchor<a class="fa fa-anchor" href="#should-not-have-anchor-5"></a></h5>
-          <h6 id="should-not-have-anchor-6">should not have anchor<a class="fa fa-anchor" href="#should-not-have-anchor-6"></a></h6>
+          <h1 id="should-not-have-anchor">should not have anchor<a class="fa fa-anchor" href="#should-not-have-anchor" onclick="event.stopPropagation()"></a></h1>
+          <h2 id="should-not-have-anchor-2">should not have anchor<a class="fa fa-anchor" href="#should-not-have-anchor-2" onclick="event.stopPropagation()"></a></h2>
+          <h3 id="should-not-have-anchor-3">should not have anchor<a class="fa fa-anchor" href="#should-not-have-anchor-3" onclick="event.stopPropagation()"></a></h3>
+          <h4 id="should-not-have-anchor-4">should not have anchor<a class="fa fa-anchor" href="#should-not-have-anchor-4" onclick="event.stopPropagation()"></a></h4>
+          <h5 id="should-not-have-anchor-5">should not have anchor<a class="fa fa-anchor" href="#should-not-have-anchor-5" onclick="event.stopPropagation()"></a></h5>
+          <h6 id="should-not-have-anchor-6">should not have anchor<a class="fa fa-anchor" href="#should-not-have-anchor-6" onclick="event.stopPropagation()"></a></h6>
         </panel>
         <panel expanded=""><template slot="_header">
             <p>Expanded</p>
           </template>
           <p>Headings in a expanded-by-default panel <strong>should</strong> have anchors</p>
-          <h1 id="should-have-anchor-8">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-8"></a></h1>
-          <h2 id="should-have-anchor-9">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-9"></a></h2>
-          <h3 id="should-have-anchor-10">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-10"></a></h3>
-          <h4 id="should-have-anchor-11">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-11"></a></h4>
-          <h5 id="should-have-anchor-12">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-12"></a></h5>
-          <h6 id="should-have-anchor-13">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-13"></a></h6>
+          <h1 id="should-have-anchor-8">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-8" onclick="event.stopPropagation()"></a></h1>
+          <h2 id="should-have-anchor-9">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-9" onclick="event.stopPropagation()"></a></h2>
+          <h3 id="should-have-anchor-10">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-10" onclick="event.stopPropagation()"></a></h3>
+          <h4 id="should-have-anchor-11">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-11" onclick="event.stopPropagation()"></a></h4>
+          <h5 id="should-have-anchor-12">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-12" onclick="event.stopPropagation()"></a></h5>
+          <h6 id="should-have-anchor-13">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-13" onclick="event.stopPropagation()"></a></h6>
         </panel>
         <hr>
         <div>
-          <h1 id="included-file">Included File<a class="fa fa-anchor" href="#included-file"></a></h1>
+          <h1 id="included-file">Included File<a class="fa fa-anchor" href="#included-file" onclick="event.stopPropagation()"></a></h1>
           <br>
-          <h1 id="should-have-anchor-14">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-14"></a></h1>
-          <h2 id="should-have-anchor-15">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-15"></a></h2>
-          <h3 id="should-have-anchor-16">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-16"></a></h3>
-          <h4 id="should-have-anchor-17">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-17"></a></h4>
-          <h5 id="should-have-anchor-18">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-18"></a></h5>
-          <h6 id="should-have-anchor-19">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-19"></a></h6>
+          <h1 id="should-have-anchor-14">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-14" onclick="event.stopPropagation()"></a></h1>
+          <h2 id="should-have-anchor-15">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-15" onclick="event.stopPropagation()"></a></h2>
+          <h3 id="should-have-anchor-16">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-16" onclick="event.stopPropagation()"></a></h3>
+          <h4 id="should-have-anchor-17">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-17" onclick="event.stopPropagation()"></a></h4>
+          <h5 id="should-have-anchor-18">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-18" onclick="event.stopPropagation()"></a></h5>
+          <h6 id="should-have-anchor-19">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-19" onclick="event.stopPropagation()"></a></h6>
           <panel id="should-have-anchor-20"><template slot="_header">
-              <h4 id="should-have-anchor-20">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-20"></a></h4>
+              <h4 id="should-have-anchor-20">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-20" onclick="event.stopPropagation()"></a></h4>
             </template>
             Lorem ipsum
           </panel>
@@ -78,23 +79,23 @@ <h4 id="should-have-anchor-20">should have anchor<a class="fa fa-anchor" href="#
               <p>Collapsed</p>
             </template>
             <p>Headings in a collapsed-by-default panel should <strong>not</strong> have anchors</p>
-            <h1 id="should-not-have-anchor-7">should not have anchor<a class="fa fa-anchor" href="#should-not-have-anchor-7"></a></h1>
-            <h2 id="should-not-have-anchor-8">should not have anchor<a class="fa fa-anchor" href="#should-not-have-anchor-8"></a></h2>
-            <h3 id="should-not-have-anchor-9">should not have anchor<a class="fa fa-anchor" href="#should-not-have-anchor-9"></a></h3>
-            <h4 id="should-not-have-anchor-10">should not have anchor<a class="fa fa-anchor" href="#should-not-have-anchor-10"></a></h4>
-            <h5 id="should-not-have-anchor-11">should not have anchor<a class="fa fa-anchor" href="#should-not-have-anchor-11"></a></h5>
-            <h6 id="should-not-have-anchor-12">should not have anchor<a class="fa fa-anchor" href="#should-not-have-anchor-12"></a></h6>
+            <h1 id="should-not-have-anchor-7">should not have anchor<a class="fa fa-anchor" href="#should-not-have-anchor-7" onclick="event.stopPropagation()"></a></h1>
+            <h2 id="should-not-have-anchor-8">should not have anchor<a class="fa fa-anchor" href="#should-not-have-anchor-8" onclick="event.stopPropagation()"></a></h2>
+            <h3 id="should-not-have-anchor-9">should not have anchor<a class="fa fa-anchor" href="#should-not-have-anchor-9" onclick="event.stopPropagation()"></a></h3>
+            <h4 id="should-not-have-anchor-10">should not have anchor<a class="fa fa-anchor" href="#should-not-have-anchor-10" onclick="event.stopPropagation()"></a></h4>
+            <h5 id="should-not-have-anchor-11">should not have anchor<a class="fa fa-anchor" href="#should-not-have-anchor-11" onclick="event.stopPropagation()"></a></h5>
+            <h6 id="should-not-have-anchor-12">should not have anchor<a class="fa fa-anchor" href="#should-not-have-anchor-12" onclick="event.stopPropagation()"></a></h6>
           </panel>
           <panel expanded=""><template slot="_header">
               <p>Expanded</p>
             </template>
             <p>Headings in a expanded-by-default panel <strong>should</strong> have anchors</p>
-            <h1 id="should-have-anchor-21">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-21"></a></h1>
-            <h2 id="should-have-anchor-22">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-22"></a></h2>
-            <h3 id="should-have-anchor-23">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-23"></a></h3>
-            <h4 id="should-have-anchor-24">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-24"></a></h4>
-            <h5 id="should-have-anchor-25">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-25"></a></h5>
-            <h6 id="should-have-anchor-26">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-26"></a></h6>
+            <h1 id="should-have-anchor-21">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-21" onclick="event.stopPropagation()"></a></h1>
+            <h2 id="should-have-anchor-22">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-22" onclick="event.stopPropagation()"></a></h2>
+            <h3 id="should-have-anchor-23">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-23" onclick="event.stopPropagation()"></a></h3>
+            <h4 id="should-have-anchor-24">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-24" onclick="event.stopPropagation()"></a></h4>
+            <h5 id="should-have-anchor-25">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-25" onclick="event.stopPropagation()"></a></h5>
+            <h6 id="should-have-anchor-26">should have anchor<a class="fa fa-anchor" href="#should-have-anchor-26" onclick="event.stopPropagation()"></a></h6>
           </panel>
         </div>
       </div>
@@ -118,9 +119,9 @@ <h6 id="should-have-anchor-26">should have anchor<a class="fa fa-anchor" href="#
   const enableSearch = true
 </script>
 <script src="markbind/js/setup.js"></script>
-<script src="SCRIPT_LINK"></script>
+<script src="/test_site/plugins/testMarkbindPlugin/testMarkbindPluginScript.js"></script>
 <script>
-  alert("hello")
+  alert("Inline plugin script loaded!")
 </script>
 
 <!-- Global site tag (gtag.js) - Google Analytics -->
diff --git a/test/functional/test_site/expected/testAntiFOUCStyles.html b/test/functional/test_site/expected/testAntiFOUCStyles.html
index c18c1a5121..50e10f309f 100644
--- a/test/functional/test_site/expected/testAntiFOUCStyles.html
+++ b/test/functional/test_site/expected/testAntiFOUCStyles.html
@@ -15,7 +15,8 @@
   <link rel="stylesheet" href="markbind/css/octicons.css">
   <link rel="stylesheet" href="markbind/css/github.min.css">
   <link rel="stylesheet" href="markbind/css/markbind.css">
-  <link rel="stylesheet" href="STYLESHEET_LINK">
+  <link rel="stylesheet" href="/test_site/plugins/testMarkbindPlugin/testMarkbindPluginStylesheet.css">
+  <link rel="stylesheet" href="/test_site/plugins/markbind-plugin-anchors/markbind-plugin-anchors.css">
   <link rel="stylesheet" href="markbind/layouts/default/styles.css">
   <meta name="default-head-bottom">
   <link rel="icon" href="/test_site/favicon.png">
@@ -77,9 +78,9 @@
   const enableSearch = true
 </script>
 <script src="markbind/js/setup.js"></script>
-<script src="SCRIPT_LINK"></script>
+<script src="/test_site/plugins/testMarkbindPlugin/testMarkbindPluginScript.js"></script>
 <script>
-  alert("hello")
+  alert("Inline plugin script loaded!")
 </script>
 
 <!-- Global site tag (gtag.js) - Google Analytics -->
diff --git a/test/functional/test_site/expected/testCodeBlocks.html b/test/functional/test_site/expected/testCodeBlocks.html
index 1486263222..5da7720da7 100644
--- a/test/functional/test_site/expected/testCodeBlocks.html
+++ b/test/functional/test_site/expected/testCodeBlocks.html
@@ -15,7 +15,8 @@
   <link rel="stylesheet" href="markbind/css/octicons.css">
   <link rel="stylesheet" href="markbind/css/github.min.css">
   <link rel="stylesheet" href="markbind/css/markbind.css">
-  <link rel="stylesheet" href="STYLESHEET_LINK">
+  <link rel="stylesheet" href="/test_site/plugins/testMarkbindPlugin/testMarkbindPluginStylesheet.css">
+  <link rel="stylesheet" href="/test_site/plugins/markbind-plugin-anchors/markbind-plugin-anchors.css">
   <link rel="stylesheet" href="markbind/layouts/default/styles.css">
   <meta name="default-head-bottom">
   <link rel="icon" href="/test_site/favicon.png">
@@ -73,9 +74,9 @@
   const enableSearch = true
 </script>
 <script src="markbind/js/setup.js"></script>
-<script src="SCRIPT_LINK"></script>
+<script src="/test_site/plugins/testMarkbindPlugin/testMarkbindPluginScript.js"></script>
 <script>
-  alert("hello")
+  alert("Inline plugin script loaded!")
 </script>
 
 <!-- Global site tag (gtag.js) - Google Analytics -->
diff --git a/test/functional/test_site/expected/testDates.html b/test/functional/test_site/expected/testDates.html
index f868ebb83c..c31ad90eb4 100644
--- a/test/functional/test_site/expected/testDates.html
+++ b/test/functional/test_site/expected/testDates.html
@@ -15,7 +15,8 @@
   <link rel="stylesheet" href="markbind/css/octicons.css">
   <link rel="stylesheet" href="markbind/css/github.min.css">
   <link rel="stylesheet" href="markbind/css/markbind.css">
-  <link rel="stylesheet" href="STYLESHEET_LINK">
+  <link rel="stylesheet" href="/test_site/plugins/testMarkbindPlugin/testMarkbindPluginStylesheet.css">
+  <link rel="stylesheet" href="/test_site/plugins/markbind-plugin-anchors/markbind-plugin-anchors.css">
   <link rel="stylesheet" href="markbind/layouts/default/styles.css">
   <meta name="default-head-bottom">
   <link rel="icon" href="/test_site/favicon.png">
@@ -25,7 +26,7 @@
   <div id="app">
     <div id="flex-body">
       <div id="content-wrapper">
-        <h2 id="dates">Dates<a class="fa fa-anchor" href="#dates"></a></h2>
+        <h2 id="dates">Dates<a class="fa fa-anchor" href="#dates" onclick="event.stopPropagation()"></a></h2>
         <div></div>
         <p>Mon 12 Aug should be Mon 12 Aug</p>
         <p>12 08 2019 should be 12 08 2019</p>
@@ -57,9 +58,9 @@ <h2 id="dates">Dates<a class="fa fa-anchor" href="#dates"></a></h2>
   const enableSearch = true
 </script>
 <script src="markbind/js/setup.js"></script>
-<script src="SCRIPT_LINK"></script>
+<script src="/test_site/plugins/testMarkbindPlugin/testMarkbindPluginScript.js"></script>
 <script>
-  alert("hello")
+  alert("Inline plugin script loaded!")
 </script>
 
 <!-- Global site tag (gtag.js) - Google Analytics -->
diff --git a/test/functional/test_site/expected/testEmptyFrontmatter.html b/test/functional/test_site/expected/testEmptyFrontmatter.html
index 89f9b50d18..0fc898165f 100644
--- a/test/functional/test_site/expected/testEmptyFrontmatter.html
+++ b/test/functional/test_site/expected/testEmptyFrontmatter.html
@@ -15,7 +15,8 @@
   <link rel="stylesheet" href="markbind/css/octicons.css">
   <link rel="stylesheet" href="markbind/css/github.min.css">
   <link rel="stylesheet" href="markbind/css/markbind.css">
-  <link rel="stylesheet" href="STYLESHEET_LINK">
+  <link rel="stylesheet" href="/test_site/plugins/testMarkbindPlugin/testMarkbindPluginStylesheet.css">
+  <link rel="stylesheet" href="/test_site/plugins/markbind-plugin-anchors/markbind-plugin-anchors.css">
   <link rel="stylesheet" href="markbind/layouts/default/styles.css">
   <meta name="default-head-bottom">
   <link rel="icon" href="/test_site/favicon.png">
@@ -47,9 +48,9 @@
   const enableSearch = true
 </script>
 <script src="markbind/js/setup.js"></script>
-<script src="SCRIPT_LINK"></script>
+<script src="/test_site/plugins/testMarkbindPlugin/testMarkbindPluginScript.js"></script>
 <script>
-  alert("hello")
+  alert("Inline plugin script loaded!")
 </script>
 
 <!-- Global site tag (gtag.js) - Google Analytics -->
diff --git a/test/functional/test_site/expected/testExternalScripts.html b/test/functional/test_site/expected/testExternalScripts.html
index 73f35732c5..8be8a9ad4c 100644
--- a/test/functional/test_site/expected/testExternalScripts.html
+++ b/test/functional/test_site/expected/testExternalScripts.html
@@ -15,7 +15,8 @@
   <link rel="stylesheet" href="markbind/css/octicons.css">
   <link rel="stylesheet" href="markbind/css/github.min.css">
   <link rel="stylesheet" href="markbind/css/markbind.css">
-  <link rel="stylesheet" href="STYLESHEET_LINK">
+  <link rel="stylesheet" href="/test_site/plugins/testMarkbindPlugin/testMarkbindPluginStylesheet.css">
+  <link rel="stylesheet" href="/test_site/plugins/markbind-plugin-anchors/markbind-plugin-anchors.css">
   <link rel="stylesheet" href="markbind/layouts/default/styles.css">
   <meta name="default-head-bottom">
   <link rel="icon" href="/test_site/favicon.png">
@@ -52,9 +53,9 @@
 </script>
 <script src="markbind/js/setup.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML"></script>
-<script src="SCRIPT_LINK"></script>
+<script src="/test_site/plugins/testMarkbindPlugin/testMarkbindPluginScript.js"></script>
 <script>
-  alert("hello")
+  alert("Inline plugin script loaded!")
 </script>
 
 <!-- Global site tag (gtag.js) - Google Analytics -->
diff --git a/test/functional/test_site/expected/testImportVariables._include_.html b/test/functional/test_site/expected/testImportVariables._include_.html
index c393869205..dec4289734 100644
--- a/test/functional/test_site/expected/testImportVariables._include_.html
+++ b/test/functional/test_site/expected/testImportVariables._include_.html
@@ -4,11 +4,11 @@
 <p>Test import variables from src specified via variable:
   This variable comes from <a href="http://variablesToImport.md">variablesToImport.md</a></p>
 <p>Test import variables that itself imports other variables:</p>
-<h2 id="trying-to-access-a-page-variable">Trying to access a page variable:<a class="fa fa-anchor" href="#trying-to-access-a-page-variable"></a></h2>
+<h2 id="trying-to-access-a-page-variable">Trying to access a page variable:<a class="fa fa-anchor" href="#trying-to-access-a-page-variable" onclick="event.stopPropagation()"></a></h2>
 <p>There should be something red below:</p>
 <div style="color:red">This is a page variable from <a href="http://variablestoimport.md">variablestoimport.md</a></div>
 Something should have appeared above in red.
-<h2 id="trying-to-access-an-imported-variable-via-namespace">Trying to access an imported variable via namespace:<a class="fa fa-anchor" href="#trying-to-access-an-imported-variable-via-namespace"></a></h2>
+<h2 id="trying-to-access-an-imported-variable-via-namespace">Trying to access an imported variable via namespace:<a class="fa fa-anchor" href="#trying-to-access-an-imported-variable-via-namespace" onclick="event.stopPropagation()"></a></h2>
 <p>There should be something blue below:</p>
 <div style="color:blue">This is a deeply imported variable</div>
 Something should have appeared above in blue.
\ No newline at end of file
diff --git a/test/functional/test_site/expected/testImportVariables.html b/test/functional/test_site/expected/testImportVariables.html
index 1a676e0a78..4ef49f5815 100644
--- a/test/functional/test_site/expected/testImportVariables.html
+++ b/test/functional/test_site/expected/testImportVariables.html
@@ -15,7 +15,8 @@
   <link rel="stylesheet" href="markbind/css/octicons.css">
   <link rel="stylesheet" href="markbind/css/github.min.css">
   <link rel="stylesheet" href="markbind/css/markbind.css">
-  <link rel="stylesheet" href="STYLESHEET_LINK">
+  <link rel="stylesheet" href="/test_site/plugins/testMarkbindPlugin/testMarkbindPluginStylesheet.css">
+  <link rel="stylesheet" href="/test_site/plugins/markbind-plugin-anchors/markbind-plugin-anchors.css">
   <link rel="stylesheet" href="markbind/layouts/default/styles.css">
   <meta name="default-head-bottom">
   <link rel="icon" href="/test_site/favicon.png">
@@ -31,11 +32,11 @@
         <p>Test import variables from src specified via variable:
           This variable comes from <a href="http://variablesToImport.md">variablesToImport.md</a></p>
         <p>Test import variables that itself imports other variables:</p>
-        <h2 id="trying-to-access-a-page-variable">Trying to access a page variable:<a class="fa fa-anchor" href="#trying-to-access-a-page-variable"></a></h2>
+        <h2 id="trying-to-access-a-page-variable">Trying to access a page variable:<a class="fa fa-anchor" href="#trying-to-access-a-page-variable" onclick="event.stopPropagation()"></a></h2>
         <p>There should be something red below:</p>
         <div style="color:red">This is a page variable from <a href="http://variablestoimport.md">variablestoimport.md</a></div>
         Something should have appeared above in red.
-        <h2 id="trying-to-access-an-imported-variable-via-namespace">Trying to access an imported variable via namespace:<a class="fa fa-anchor" href="#trying-to-access-an-imported-variable-via-namespace"></a></h2>
+        <h2 id="trying-to-access-an-imported-variable-via-namespace">Trying to access an imported variable via namespace:<a class="fa fa-anchor" href="#trying-to-access-an-imported-variable-via-namespace" onclick="event.stopPropagation()"></a></h2>
         <p>There should be something blue below:</p>
         <div style="color:blue">This is a deeply imported variable</div>
         Something should have appeared above in blue.
@@ -60,9 +61,9 @@ <h2 id="trying-to-access-an-imported-variable-via-namespace">Trying to access an
   const enableSearch = true
 </script>
 <script src="markbind/js/setup.js"></script>
-<script src="SCRIPT_LINK"></script>
+<script src="/test_site/plugins/testMarkbindPlugin/testMarkbindPluginScript.js"></script>
 <script>
-  alert("hello")
+  alert("Inline plugin script loaded!")
 </script>
 
 <!-- Global site tag (gtag.js) - Google Analytics -->
diff --git a/test/functional/test_site/expected/testIncludeMultipleModals.html b/test/functional/test_site/expected/testIncludeMultipleModals.html
index f9e970f5cf..0a4bab8db1 100644
--- a/test/functional/test_site/expected/testIncludeMultipleModals.html
+++ b/test/functional/test_site/expected/testIncludeMultipleModals.html
@@ -15,7 +15,8 @@
   <link rel="stylesheet" href="markbind/css/octicons.css">
   <link rel="stylesheet" href="markbind/css/github.min.css">
   <link rel="stylesheet" href="markbind/css/markbind.css">
-  <link rel="stylesheet" href="STYLESHEET_LINK">
+  <link rel="stylesheet" href="/test_site/plugins/testMarkbindPlugin/testMarkbindPluginStylesheet.css">
+  <link rel="stylesheet" href="/test_site/plugins/markbind-plugin-anchors/markbind-plugin-anchors.css">
   <link rel="stylesheet" href="markbind/layouts/default/styles.css">
   <meta name="default-head-bottom">
   <link rel="icon" href="/test_site/favicon.png">
@@ -67,9 +68,9 @@
   const enableSearch = true
 </script>
 <script src="markbind/js/setup.js"></script>
-<script src="SCRIPT_LINK"></script>
+<script src="/test_site/plugins/testMarkbindPlugin/testMarkbindPluginScript.js"></script>
 <script>
-  alert("hello")
+  alert("Inline plugin script loaded!")
 </script>
 
 <!-- Global site tag (gtag.js) - Google Analytics -->
diff --git a/test/functional/test_site/expected/testIncludePluginsRendered.html b/test/functional/test_site/expected/testIncludePluginsRendered.html
index b1486d38c5..f0ba2df151 100644
--- a/test/functional/test_site/expected/testIncludePluginsRendered.html
+++ b/test/functional/test_site/expected/testIncludePluginsRendered.html
@@ -15,7 +15,8 @@
   <link rel="stylesheet" href="markbind/css/octicons.css">
   <link rel="stylesheet" href="markbind/css/github.min.css">
   <link rel="stylesheet" href="markbind/css/markbind.css">
-  <link rel="stylesheet" href="STYLESHEET_LINK">
+  <link rel="stylesheet" href="/test_site/plugins/testMarkbindPlugin/testMarkbindPluginStylesheet.css">
+  <link rel="stylesheet" href="/test_site/plugins/markbind-plugin-anchors/markbind-plugin-anchors.css">
   <link rel="stylesheet" href="markbind/layouts/default/styles.css">
   <meta name="default-head-bottom">
   <link rel="icon" href="/test_site/favicon.png">
@@ -53,9 +54,9 @@
   const enableSearch = true
 </script>
 <script src="markbind/js/setup.js"></script>
-<script src="SCRIPT_LINK"></script>
+<script src="/test_site/plugins/testMarkbindPlugin/testMarkbindPluginScript.js"></script>
 <script>
-  alert("hello")
+  alert("Inline plugin script loaded!")
 </script>
 
 <!-- Global site tag (gtag.js) - Google Analytics -->
diff --git a/test/functional/test_site/expected/testLayouts.html b/test/functional/test_site/expected/testLayouts.html
index 81e0efb9b2..b4a7e4461c 100644
--- a/test/functional/test_site/expected/testLayouts.html
+++ b/test/functional/test_site/expected/testLayouts.html
@@ -15,7 +15,8 @@
   <link rel="stylesheet" href="markbind/css/octicons.css">
   <link rel="stylesheet" href="markbind/css/github.min.css">
   <link rel="stylesheet" href="markbind/css/markbind.css">
-  <link rel="stylesheet" href="STYLESHEET_LINK">
+  <link rel="stylesheet" href="/test_site/plugins/testMarkbindPlugin/testMarkbindPluginStylesheet.css">
+  <link rel="stylesheet" href="/test_site/plugins/markbind-plugin-anchors/markbind-plugin-anchors.css">
   <link rel="stylesheet" href="markbind/layouts/testLayout/styles.css">
   <link rel="stylesheet" href="markbind/css/site-nav.css">
   <script src="/test_site/headFiles/overwriteLayoutScript.js"></script>
@@ -55,9 +56,9 @@
   const enableSearch = true
 </script>
 <script src="markbind/js/setup.js"></script>
-<script src="SCRIPT_LINK"></script>
+<script src="/test_site/plugins/testMarkbindPlugin/testMarkbindPluginScript.js"></script>
 <script>
-  alert("hello")
+  alert("Inline plugin script loaded!")
 </script>
 
 <!-- Global site tag (gtag.js) - Google Analytics -->
diff --git a/test/functional/test_site/expected/testLayoutsOverride.html b/test/functional/test_site/expected/testLayoutsOverride.html
index edf7595a29..c44912a6c7 100644
--- a/test/functional/test_site/expected/testLayoutsOverride.html
+++ b/test/functional/test_site/expected/testLayoutsOverride.html
@@ -15,7 +15,8 @@
   <link rel="stylesheet" href="markbind/css/octicons.css">
   <link rel="stylesheet" href="markbind/css/github.min.css">
   <link rel="stylesheet" href="markbind/css/markbind.css">
-  <link rel="stylesheet" href="STYLESHEET_LINK">
+  <link rel="stylesheet" href="/test_site/plugins/testMarkbindPlugin/testMarkbindPluginStylesheet.css">
+  <link rel="stylesheet" href="/test_site/plugins/markbind-plugin-anchors/markbind-plugin-anchors.css">
   <link rel="stylesheet" href="markbind/layouts/testLayout/styles.css">
   <link rel="stylesheet" href="markbind/css/site-nav.css">
   <script src="/test_site/headFiles/overwriteLayoutScript.js"></script>
@@ -55,9 +56,9 @@
   const enableSearch = true
 </script>
 <script src="markbind/js/setup.js"></script>
-<script src="SCRIPT_LINK"></script>
+<script src="/test_site/plugins/testMarkbindPlugin/testMarkbindPluginScript.js"></script>
 <script>
-  alert("hello")
+  alert("Inline plugin script loaded!")
 </script>
 
 <!-- Global site tag (gtag.js) - Google Analytics -->
diff --git a/test/functional/test_site/expected/testPanels/NestedPanel._include_.html b/test/functional/test_site/expected/testPanels/NestedPanel._include_.html
index 429ef1de2a..80b20b0a16 100644
--- a/test/functional/test_site/expected/testPanels/NestedPanel._include_.html
+++ b/test/functional/test_site/expected/testPanels/NestedPanel._include_.html
@@ -1,3 +1,3 @@
 <panel src="/test_site/testPanels/NormalPanelContent._include_.html" expanded="" id="nested-panel"><template slot="_header">
-    <h2 id="nested-panel">Nested Panel<a class="fa fa-anchor" href="#nested-panel"></a></h2>
+    <h2 id="nested-panel">Nested Panel<a class="fa fa-anchor" href="#nested-panel" onclick="event.stopPropagation()"></a></h2>
   </template></panel>
\ No newline at end of file
diff --git a/test/functional/test_site/expected/testPanels/NormalPanelContent._include_.html b/test/functional/test_site/expected/testPanels/NormalPanelContent._include_.html
index a82ad044a5..7aa08fff88 100644
--- a/test/functional/test_site/expected/testPanels/NormalPanelContent._include_.html
+++ b/test/functional/test_site/expected/testPanels/NormalPanelContent._include_.html
@@ -1 +1 @@
-<h3 id="normal-panel-content-heading">Normal panel content heading<a class="fa fa-anchor" href="#normal-panel-content-heading"></a></h3>
\ No newline at end of file
+<h3 id="normal-panel-content-heading">Normal panel content heading<a class="fa fa-anchor" href="#normal-panel-content-heading" onclick="event.stopPropagation()"></a></h3>
\ No newline at end of file
diff --git a/test/functional/test_site/expected/testPanels/PanelNormalSource._include_.html b/test/functional/test_site/expected/testPanels/PanelNormalSource._include_.html
index e80b7a53c8..f8b35210a0 100644
--- a/test/functional/test_site/expected/testPanels/PanelNormalSource._include_.html
+++ b/test/functional/test_site/expected/testPanels/PanelNormalSource._include_.html
@@ -1 +1 @@
-<h3 id="panel-normal-source-content-headings">Panel normal source content headings<a class="fa fa-anchor" href="#panel-normal-source-content-headings"></a></h3>
\ No newline at end of file
+<h3 id="panel-normal-source-content-headings">Panel normal source content headings<a class="fa fa-anchor" href="#panel-normal-source-content-headings" onclick="event.stopPropagation()"></a></h3>
\ No newline at end of file
diff --git a/test/functional/test_site/expected/testPanels/PanelSourceContainsSegment._include_.html b/test/functional/test_site/expected/testPanels/PanelSourceContainsSegment._include_.html
index 3f76bbdf60..f3fd3fc6af 100644
--- a/test/functional/test_site/expected/testPanels/PanelSourceContainsSegment._include_.html
+++ b/test/functional/test_site/expected/testPanels/PanelSourceContainsSegment._include_.html
@@ -1,4 +1,4 @@
 <div id="segment">
-  <h3 id="panel-source-segment-content-headings">Panel source segment content headings<a class="fa fa-anchor" href="#panel-source-segment-content-headings"></a></h3>
+  <h3 id="panel-source-segment-content-headings">Panel source segment content headings<a class="fa fa-anchor" href="#panel-source-segment-content-headings" onclick="event.stopPropagation()"></a></h3>
 </div>
-<h3 id="this-heading-is-not-src-of-any-panel-so-it-should-not-be-in-the-search-data">This heading is not src of any panel, so it should not be in the search data<a class="fa fa-anchor" href="#this-heading-is-not-src-of-any-panel-so-it-should-not-be-in-the-search-data"></a></h3>
\ No newline at end of file
+<h3 id="this-heading-is-not-src-of-any-panel-so-it-should-not-be-in-the-search-data">This heading is not src of any panel, so it should not be in the search data<a class="fa fa-anchor" href="#this-heading-is-not-src-of-any-panel-so-it-should-not-be-in-the-search-data" onclick="event.stopPropagation()"></a></h3>
\ No newline at end of file
diff --git a/test/functional/test_site/expected/testPanels/boilerTestPanel._include_.html b/test/functional/test_site/expected/testPanels/boilerTestPanel._include_.html
index cd49919927..060743b645 100644
--- a/test/functional/test_site/expected/testPanels/boilerTestPanel._include_.html
+++ b/test/functional/test_site/expected/testPanels/boilerTestPanel._include_.html
@@ -1 +1 @@
-<h3 id="boilerplate-test-for-panel-heading">boilerplate test for panel heading<a class="fa fa-anchor" href="#boilerplate-test-for-panel-heading"></a></h3>
\ No newline at end of file
+<h3 id="boilerplate-test-for-panel-heading">boilerplate test for panel heading<a class="fa fa-anchor" href="#boilerplate-test-for-panel-heading" onclick="event.stopPropagation()"></a></h3>
\ No newline at end of file
diff --git a/test/functional/test_site/expected/testPanels/notInside._include_.html b/test/functional/test_site/expected/testPanels/notInside._include_.html
index bacd089bd9..f21809c557 100644
--- a/test/functional/test_site/expected/testPanels/notInside._include_.html
+++ b/test/functional/test_site/expected/testPanels/notInside._include_.html
@@ -1 +1 @@
-<h3 id="heading-in-panel-boilerplate">heading in panel boilerplate<a class="fa fa-anchor" href="#heading-in-panel-boilerplate"></a></h3>
\ No newline at end of file
+<h3 id="heading-in-panel-boilerplate">heading in panel boilerplate<a class="fa fa-anchor" href="#heading-in-panel-boilerplate" onclick="event.stopPropagation()"></a></h3>
\ No newline at end of file
diff --git a/test/functional/test_site/expected/testPanelsWithImportedVariables.html b/test/functional/test_site/expected/testPanelsWithImportedVariables.html
index f89d516b21..03d0dd97ef 100644
--- a/test/functional/test_site/expected/testPanelsWithImportedVariables.html
+++ b/test/functional/test_site/expected/testPanelsWithImportedVariables.html
@@ -15,7 +15,8 @@
   <link rel="stylesheet" href="markbind/css/octicons.css">
   <link rel="stylesheet" href="markbind/css/github.min.css">
   <link rel="stylesheet" href="markbind/css/markbind.css">
-  <link rel="stylesheet" href="STYLESHEET_LINK">
+  <link rel="stylesheet" href="/test_site/plugins/testMarkbindPlugin/testMarkbindPluginStylesheet.css">
+  <link rel="stylesheet" href="/test_site/plugins/markbind-plugin-anchors/markbind-plugin-anchors.css">
   <link rel="stylesheet" href="markbind/layouts/default/styles.css">
   <meta name="default-head-bottom">
   <link rel="icon" href="/test_site/favicon.png">
@@ -53,9 +54,9 @@
   const enableSearch = true
 </script>
 <script src="markbind/js/setup.js"></script>
-<script src="SCRIPT_LINK"></script>
+<script src="/test_site/plugins/testMarkbindPlugin/testMarkbindPluginScript.js"></script>
 <script>
-  alert("hello")
+  alert("Inline plugin script loaded!")
 </script>
 
 <!-- Global site tag (gtag.js) - Google Analytics -->
diff --git a/test/functional/test_site/expected/testPlantUML.html b/test/functional/test_site/expected/testPlantUML.html
index 1646199bc3..363c883dee 100644
--- a/test/functional/test_site/expected/testPlantUML.html
+++ b/test/functional/test_site/expected/testPlantUML.html
@@ -15,7 +15,8 @@
   <link rel="stylesheet" href="markbind/css/octicons.css">
   <link rel="stylesheet" href="markbind/css/github.min.css">
   <link rel="stylesheet" href="markbind/css/markbind.css">
-  <link rel="stylesheet" href="STYLESHEET_LINK">
+  <link rel="stylesheet" href="/test_site/plugins/testMarkbindPlugin/testMarkbindPluginStylesheet.css">
+  <link rel="stylesheet" href="/test_site/plugins/markbind-plugin-anchors/markbind-plugin-anchors.css">
   <link rel="stylesheet" href="markbind/layouts/default/styles.css">
   <meta name="default-head-bottom">
   <link rel="icon" href="/test_site/favicon.png">
@@ -74,9 +75,9 @@
   const enableSearch = true
 </script>
 <script src="markbind/js/setup.js"></script>
-<script src="SCRIPT_LINK"></script>
+<script src="/test_site/plugins/testMarkbindPlugin/testMarkbindPluginScript.js"></script>
 <script>
-  alert("hello")
+  alert("Inline plugin script loaded!")
 </script>
 
 <!-- Global site tag (gtag.js) - Google Analytics -->
diff --git a/test/functional/test_site/expected/testPopoverTrigger.html b/test/functional/test_site/expected/testPopoverTrigger.html
index b780734d56..bca083fbac 100644
--- a/test/functional/test_site/expected/testPopoverTrigger.html
+++ b/test/functional/test_site/expected/testPopoverTrigger.html
@@ -15,7 +15,8 @@
   <link rel="stylesheet" href="markbind/css/octicons.css">
   <link rel="stylesheet" href="markbind/css/github.min.css">
   <link rel="stylesheet" href="markbind/css/markbind.css">
-  <link rel="stylesheet" href="STYLESHEET_LINK">
+  <link rel="stylesheet" href="/test_site/plugins/testMarkbindPlugin/testMarkbindPluginStylesheet.css">
+  <link rel="stylesheet" href="/test_site/plugins/markbind-plugin-anchors/markbind-plugin-anchors.css">
   <link rel="stylesheet" href="markbind/layouts/default/styles.css">
   <meta name="default-head-bottom">
   <link rel="icon" href="/test_site/favicon.png">
@@ -52,9 +53,9 @@
   const enableSearch = true
 </script>
 <script src="markbind/js/setup.js"></script>
-<script src="SCRIPT_LINK"></script>
+<script src="/test_site/plugins/testMarkbindPlugin/testMarkbindPluginScript.js"></script>
 <script>
-  alert("hello")
+  alert("Inline plugin script loaded!")
 </script>
 
 <!-- Global site tag (gtag.js) - Google Analytics -->
diff --git a/test/functional/test_site/expected/testThumbnails.html b/test/functional/test_site/expected/testThumbnails.html
index 05625c2a9f..d88a8d7f78 100644
--- a/test/functional/test_site/expected/testThumbnails.html
+++ b/test/functional/test_site/expected/testThumbnails.html
@@ -15,7 +15,8 @@
   <link rel="stylesheet" href="markbind/css/octicons.css">
   <link rel="stylesheet" href="markbind/css/github.min.css">
   <link rel="stylesheet" href="markbind/css/markbind.css">
-  <link rel="stylesheet" href="STYLESHEET_LINK">
+  <link rel="stylesheet" href="/test_site/plugins/testMarkbindPlugin/testMarkbindPluginStylesheet.css">
+  <link rel="stylesheet" href="/test_site/plugins/markbind-plugin-anchors/markbind-plugin-anchors.css">
   <link rel="stylesheet" href="markbind/layouts/default/styles.css">
   <meta name="default-head-bottom">
   <link rel="icon" href="/test_site/favicon.png">
@@ -149,9 +150,9 @@
   const enableSearch = true
 </script>
 <script src="markbind/js/setup.js"></script>
-<script src="SCRIPT_LINK"></script>
+<script src="/test_site/plugins/testMarkbindPlugin/testMarkbindPluginScript.js"></script>
 <script>
-  alert("hello")
+  alert("Inline plugin script loaded!")
 </script>
 
 <!-- Global site tag (gtag.js) - Google Analytics -->
diff --git a/test/functional/test_site/expected/testTooltipSpacing.html b/test/functional/test_site/expected/testTooltipSpacing.html
index bfae84a82a..ffa7b03366 100644
--- a/test/functional/test_site/expected/testTooltipSpacing.html
+++ b/test/functional/test_site/expected/testTooltipSpacing.html
@@ -15,7 +15,8 @@
   <link rel="stylesheet" href="markbind/css/octicons.css">
   <link rel="stylesheet" href="markbind/css/github.min.css">
   <link rel="stylesheet" href="markbind/css/markbind.css">
-  <link rel="stylesheet" href="STYLESHEET_LINK">
+  <link rel="stylesheet" href="/test_site/plugins/testMarkbindPlugin/testMarkbindPluginStylesheet.css">
+  <link rel="stylesheet" href="/test_site/plugins/markbind-plugin-anchors/markbind-plugin-anchors.css">
   <link rel="stylesheet" href="markbind/layouts/default/styles.css">
   <meta name="default-head-bottom">
   <link rel="icon" href="/test_site/favicon.png">
@@ -25,7 +26,7 @@
   <div id="app">
     <div id="flex-body">
       <div id="content-wrapper">
-        <h1 id="569-stray-space-after-tooltip">569: Stray space after tooltip<a class="fa fa-anchor" href="#569-stray-space-after-tooltip"></a></h1>
+        <h1 id="569-stray-space-after-tooltip">569: Stray space after tooltip<a class="fa fa-anchor" href="#569-stray-space-after-tooltip" onclick="event.stopPropagation()"></a></h1>
         <pre><code class="hljs"><span>&lt;tooltip&gt;tooltip&lt;/tooltip&gt;, test<br></span><span><br></span><span>&lt;trigger&gt;trigger&lt;/trigger&gt;, test<br></span></code></pre>
         <p><span data-mb-component-type="tooltip" v-b-tooltip.hover.top.html="tooltipInnerContentGetter" class="trigger">tooltip</span>, test</p>
         <p><span v-b-popover.hover.top.html="popoverGenerator" v-b-tooltip.hover.top.html="tooltipContentGetter" v-on:mouseover="$refs['undefined'].show()" class="trigger">trigger</span>, test</p>
@@ -50,9 +51,9 @@ <h1 id="569-stray-space-after-tooltip">569: Stray space after tooltip<a class="f
   const enableSearch = true
 </script>
 <script src="markbind/js/setup.js"></script>
-<script src="SCRIPT_LINK"></script>
+<script src="/test_site/plugins/testMarkbindPlugin/testMarkbindPluginScript.js"></script>
 <script>
-  alert("hello")
+  alert("Inline plugin script loaded!")
 </script>
 
 <!-- Global site tag (gtag.js) - Google Analytics -->
diff --git a/test/functional/test_site/expected/test_md_fragment.html b/test/functional/test_site/expected/test_md_fragment.html
index dd91092e7f..537fffa04c 100644
--- a/test/functional/test_site/expected/test_md_fragment.html
+++ b/test/functional/test_site/expected/test_md_fragment.html
@@ -15,7 +15,8 @@
   <link rel="stylesheet" href="markbind/css/octicons.css">
   <link rel="stylesheet" href="markbind/css/github.min.css">
   <link rel="stylesheet" href="markbind/css/markbind.css">
-  <link rel="stylesheet" href="STYLESHEET_LINK">
+  <link rel="stylesheet" href="/test_site/plugins/testMarkbindPlugin/testMarkbindPluginStylesheet.css">
+  <link rel="stylesheet" href="/test_site/plugins/markbind-plugin-anchors/markbind-plugin-anchors.css">
   <link rel="stylesheet" href="markbind/layouts/default/styles.css">
   <meta name="default-head-bottom">
   <link rel="icon" href="/test_site/favicon.png">
@@ -25,7 +26,7 @@
   <div id="app">
     <div id="flex-body">
       <div id="content-wrapper">
-        <h1 id="some-heading">Some heading<a class="fa fa-anchor" href="#some-heading"></a></h1>
+        <h1 id="some-heading">Some heading<a class="fa fa-anchor" href="#some-heading" onclick="event.stopPropagation()"></a></h1>
         <p>The <strong>quick</strong> brown fox jumps <em>over</em> the lazy dog.</p>
       </div>
 
@@ -48,9 +49,9 @@ <h1 id="some-heading">Some heading<a class="fa fa-anchor" href="#some-heading"><
   const enableSearch = true
 </script>
 <script src="markbind/js/setup.js"></script>
-<script src="SCRIPT_LINK"></script>
+<script src="/test_site/plugins/testMarkbindPlugin/testMarkbindPluginScript.js"></script>
 <script>
-  alert("hello")
+  alert("Inline plugin script loaded!")
 </script>
 
 <!-- Global site tag (gtag.js) - Google Analytics -->
diff --git a/test/functional/test_site_algolia_plugin/expected/index.html b/test/functional/test_site_algolia_plugin/expected/index.html
index 1779d5e26f..50acd28e27 100644
--- a/test/functional/test_site_algolia_plugin/expected/index.html
+++ b/test/functional/test_site_algolia_plugin/expected/index.html
@@ -16,6 +16,7 @@
   <link rel="stylesheet" href="markbind/css/github.min.css">
   <link rel="stylesheet" href="markbind/css/markbind.css">
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css">
+  <link rel="stylesheet" href="/test_site_algolia_plugin/plugins/markbind-plugin-anchors/markbind-plugin-anchors.css">
   <link rel="stylesheet" href="markbind/layouts/default/styles.css">
   <link rel="stylesheet" href="markbind/css/site-nav.css">
 </head>
diff --git a/test/functional/test_site_algolia_plugin/expected/markbind/css/markbind.css b/test/functional/test_site_algolia_plugin/expected/markbind/css/markbind.css
index e21c7c4808..24462b16fa 100644
--- a/test/functional/test_site_algolia_plugin/expected/markbind/css/markbind.css
+++ b/test/functional/test_site_algolia_plugin/expected/markbind/css/markbind.css
@@ -73,20 +73,6 @@ kbd {
     outline: none !important;
 }
 
-.fa.fa-anchor {
-    color: #ccc;
-    display: inline;
-    font-size: 14px;
-    margin-left: 10px;
-    padding: 3px;
-    text-decoration: none;
-    visibility: hidden;
-}
-
-.fa.fa-anchor:hover {
-    color: #555;
-}
-
 code.hljs.inline {
     background: #f8f8f8;
     color: #333;
diff --git a/test/functional/test_site_algolia_plugin/expected/markbind/js/setup.js b/test/functional/test_site_algolia_plugin/expected/markbind/js/setup.js
index c6b54ef24f..d7910b2eb3 100644
--- a/test/functional/test_site_algolia_plugin/expected/markbind/js/setup.js
+++ b/test/functional/test_site_algolia_plugin/expected/markbind/js/setup.js
@@ -13,63 +13,47 @@ function scrollToUrlAnchorHeading() {
   }
 }
 
-function flattenModals() {
-  jQuery('.modal').each((index, modal) => {
-    jQuery(modal).detach().appendTo(jQuery('#app'));
-  });
-}
-
 function insertCss(cssCode) {
   const newNode = document.createElement('style');
   newNode.innerHTML = cssCode;
   document.getElementsByTagName('head')[0].appendChild(newNode);
 }
 
-function setupAnchors() {
+function setupAnchorsForFixedNavbar() {
   const headerSelector = jQuery('header');
   const isFixed = headerSelector.filter('.header-fixed').length !== 0;
+  if (!isFixed) {
+    return;
+  }
+
   const headerHeight = headerSelector.height();
   const bufferHeight = 1;
-  if (isFixed) {
-    jQuery('.nav-inner').css('padding-top', `calc(${headerHeight}px)`);
-    jQuery('#content-wrapper').css('padding-top', `calc(${headerHeight}px)`);
-    insertCss(
-      `span.anchor {
-      display: block;
-      position: relative;
-      top: calc(-${headerHeight}px - ${bufferHeight}rem)
-      }`,
-    );
-  }
+  jQuery('.nav-inner').css('padding-top', `calc(${headerHeight}px)`);
+  jQuery('#content-wrapper').css('padding-top', `calc(${headerHeight}px)`);
+  insertCss(
+    `span.anchor {
+    display: block;
+    position: relative;
+    top: calc(-${headerHeight}px - ${bufferHeight}rem)
+    }`,
+  );
   jQuery('h1, h2, h3, h4, h5, h6, .header-wrapper').each((index, heading) => {
     if (heading.id) {
-      jQuery(heading).on('mouseenter',
-                         () => jQuery(heading).find('.fa.fa-anchor').css('visibility', 'visible'));
-      jQuery(heading).on('mouseleave',
-                         () => jQuery(heading).find('.fa.fa-anchor').css('visibility', 'hidden'));
-      if (isFixed) {
-        /**
-         * Fixing the top navbar would break anchor navigation,
-         * by creating empty spans above the <h> tag we can prevent
-         * the headings from being covered by the navbar.
-         */
-        const spanId = heading.id;
-        heading.insertAdjacentHTML('beforebegin', `<span id="${spanId}" class="anchor"></span>`);
-        jQuery(heading).removeAttr('id'); // to avoid duplicated id problem
-      }
+      /**
+       * Fixing the top navbar would break anchor navigation,
+       * by creating empty spans above the <h> tag we can prevent
+       * the headings from being covered by the navbar.
+       */
+      const spanId = heading.id;
+      heading.insertAdjacentHTML('beforebegin', `<span id="${spanId}" class="anchor"></span>`);
+      jQuery(heading).removeAttr('id'); // to avoid duplicated id problem
     }
   });
-  jQuery('.fa-anchor').each((index, anchor) => {
-    jQuery(anchor).on('click', function () {
-      window.location.href = jQuery(this).attr('href');
-    });
-  });
 }
 
 function updateSearchData(vm) {
   jQuery.getJSON(`${baseUrl}/siteData.json`)
     .then((siteData) => {
-      // eslint-disable-next-line no-param-reassign
       vm.searchData = siteData.pages;
     });
 }
@@ -97,9 +81,8 @@ function executeAfterCreatedRoutines() {
 }
 
 function executeAfterMountedRoutines() {
-  flattenModals();
   scrollToUrlAnchorHeading();
-  setupAnchors();
+  setupAnchorsForFixedNavbar();
   MarkBind.executeAfterSetupScripts.resolve();
 }
 
diff --git a/test/functional/test_site_algolia_plugin/expected/plugins/markbind-plugin-anchors/markbind-plugin-anchors.css b/test/functional/test_site_algolia_plugin/expected/plugins/markbind-plugin-anchors/markbind-plugin-anchors.css
new file mode 100644
index 0000000000..b5e8ecef24
--- /dev/null
+++ b/test/functional/test_site_algolia_plugin/expected/plugins/markbind-plugin-anchors/markbind-plugin-anchors.css
@@ -0,0 +1,23 @@
+.fa.fa-anchor {
+    color: #ccc;
+    display: inline;
+    font-size: 14px;
+    margin-left: 10px;
+    padding: 3px;
+    text-decoration: none;
+    visibility: hidden;
+}
+
+.fa.fa-anchor:hover {
+    color: #555;
+}
+
+h1:hover > .fa.fa-anchor,
+h2:hover > .fa.fa-anchor,
+h3:hover > .fa.fa-anchor,
+h4:hover > .fa.fa-anchor,
+h5:hover > .fa.fa-anchor,
+h6:hover > .fa.fa-anchor,
+.header-wrapper:hover > .fa.fa-anchor {
+    visibility: visible;
+}
diff --git a/test/functional/test_site_convert/expected/Home.html b/test/functional/test_site_convert/expected/Home.html
index 6939af9ce5..c26d46883c 100644
--- a/test/functional/test_site_convert/expected/Home.html
+++ b/test/functional/test_site_convert/expected/Home.html
@@ -15,6 +15,7 @@
   <link rel="stylesheet" href="markbind/css/octicons.css">
   <link rel="stylesheet" href="markbind/css/github.min.css">
   <link rel="stylesheet" href="markbind/css/markbind.css">
+  <link rel="stylesheet" href="/plugins/markbind-plugin-anchors/markbind-plugin-anchors.css">
   <link rel="stylesheet" href="markbind/layouts/default/styles.css">
   <link rel="stylesheet" href="markbind/css/site-nav.css">
 </head>
diff --git a/test/functional/test_site_convert/expected/Page-1.html b/test/functional/test_site_convert/expected/Page-1.html
index 410f1cd9df..2147eb1a26 100644
--- a/test/functional/test_site_convert/expected/Page-1.html
+++ b/test/functional/test_site_convert/expected/Page-1.html
@@ -15,6 +15,7 @@
   <link rel="stylesheet" href="markbind/css/octicons.css">
   <link rel="stylesheet" href="markbind/css/github.min.css">
   <link rel="stylesheet" href="markbind/css/markbind.css">
+  <link rel="stylesheet" href="/plugins/markbind-plugin-anchors/markbind-plugin-anchors.css">
   <link rel="stylesheet" href="markbind/layouts/default/styles.css">
   <link rel="stylesheet" href="markbind/css/site-nav.css">
 </head>
@@ -44,7 +45,7 @@
       </nav>
 
       <div id="content-wrapper">
-        <h1 id="page-1">Page 1<a class="fa fa-anchor" href="#page-1"></a></h1>
+        <h1 id="page-1">Page 1<a class="fa fa-anchor" href="#page-1" onclick="event.stopPropagation()"></a></h1>
       </div>
 
     </div>
diff --git a/test/functional/test_site_convert/expected/_Footer.html b/test/functional/test_site_convert/expected/_Footer.html
index bb257acb2a..003ed535a8 100644
--- a/test/functional/test_site_convert/expected/_Footer.html
+++ b/test/functional/test_site_convert/expected/_Footer.html
@@ -15,6 +15,7 @@
   <link rel="stylesheet" href="markbind/css/octicons.css">
   <link rel="stylesheet" href="markbind/css/github.min.css">
   <link rel="stylesheet" href="markbind/css/markbind.css">
+  <link rel="stylesheet" href="/plugins/markbind-plugin-anchors/markbind-plugin-anchors.css">
   <link rel="stylesheet" href="markbind/layouts/default/styles.css">
   <link rel="stylesheet" href="markbind/css/site-nav.css">
 </head>
diff --git a/test/functional/test_site_convert/expected/_Sidebar.html b/test/functional/test_site_convert/expected/_Sidebar.html
index af4a34f271..c65094a65c 100644
--- a/test/functional/test_site_convert/expected/_Sidebar.html
+++ b/test/functional/test_site_convert/expected/_Sidebar.html
@@ -15,6 +15,7 @@
   <link rel="stylesheet" href="markbind/css/octicons.css">
   <link rel="stylesheet" href="markbind/css/github.min.css">
   <link rel="stylesheet" href="markbind/css/markbind.css">
+  <link rel="stylesheet" href="/plugins/markbind-plugin-anchors/markbind-plugin-anchors.css">
   <link rel="stylesheet" href="markbind/layouts/default/styles.css">
   <link rel="stylesheet" href="markbind/css/site-nav.css">
 </head>
diff --git a/test/functional/test_site_convert/expected/about.html b/test/functional/test_site_convert/expected/about.html
index e9212bbc27..1210574b4d 100644
--- a/test/functional/test_site_convert/expected/about.html
+++ b/test/functional/test_site_convert/expected/about.html
@@ -15,6 +15,7 @@
   <link rel="stylesheet" href="markbind/css/octicons.css">
   <link rel="stylesheet" href="markbind/css/github.min.css">
   <link rel="stylesheet" href="markbind/css/markbind.css">
+  <link rel="stylesheet" href="/plugins/markbind-plugin-anchors/markbind-plugin-anchors.css">
   <link rel="stylesheet" href="markbind/layouts/default/styles.css">
   <link rel="stylesheet" href="markbind/css/site-nav.css">
 </head>
@@ -44,7 +45,7 @@
       </nav>
 
       <div id="content-wrapper">
-        <h1 id="about">About<a class="fa fa-anchor" href="#about"></a></h1>
+        <h1 id="about">About<a class="fa fa-anchor" href="#about" onclick="event.stopPropagation()"></a></h1>
         <p>Welcome to your <strong>About Us</strong> page.</p>
       </div>
 
diff --git a/test/functional/test_site_convert/expected/contents/topic1.html b/test/functional/test_site_convert/expected/contents/topic1.html
index 4b1661a8fd..513143473b 100644
--- a/test/functional/test_site_convert/expected/contents/topic1.html
+++ b/test/functional/test_site_convert/expected/contents/topic1.html
@@ -15,6 +15,7 @@
   <link rel="stylesheet" href="../markbind/css/octicons.css">
   <link rel="stylesheet" href="../markbind/css/github.min.css">
   <link rel="stylesheet" href="../markbind/css/markbind.css">
+  <link rel="stylesheet" href="/plugins/markbind-plugin-anchors/markbind-plugin-anchors.css">
   <link rel="stylesheet" href="../markbind/layouts/default/styles.css">
   <link rel="stylesheet" href="../markbind/css/site-nav.css">
 </head>
@@ -61,7 +62,7 @@
 
       <div id="content-wrapper">
         <br>
-        <h1 id="topic-1">Topic 1<a class="fa fa-anchor" href="#topic-1"></a></h1>
+        <h1 id="topic-1">Topic 1<a class="fa fa-anchor" href="#topic-1" onclick="event.stopPropagation()"></a></h1>
         <blockquote>
           <p>More content to be added</p>
         </blockquote>
diff --git a/test/functional/test_site_convert/expected/contents/topic2.html b/test/functional/test_site_convert/expected/contents/topic2.html
index 8e7fd148b2..418483f83a 100644
--- a/test/functional/test_site_convert/expected/contents/topic2.html
+++ b/test/functional/test_site_convert/expected/contents/topic2.html
@@ -15,6 +15,7 @@
   <link rel="stylesheet" href="../markbind/css/octicons.css">
   <link rel="stylesheet" href="../markbind/css/github.min.css">
   <link rel="stylesheet" href="../markbind/css/markbind.css">
+  <link rel="stylesheet" href="/plugins/markbind-plugin-anchors/markbind-plugin-anchors.css">
   <link rel="stylesheet" href="../markbind/layouts/default/styles.css">
   <link rel="stylesheet" href="../markbind/css/site-nav.css">
 </head>
diff --git a/test/functional/test_site_convert/expected/contents/topic3a.html b/test/functional/test_site_convert/expected/contents/topic3a.html
index e10643ece9..9d9d14f7d8 100644
--- a/test/functional/test_site_convert/expected/contents/topic3a.html
+++ b/test/functional/test_site_convert/expected/contents/topic3a.html
@@ -15,6 +15,7 @@
   <link rel="stylesheet" href="../markbind/css/octicons.css">
   <link rel="stylesheet" href="../markbind/css/github.min.css">
   <link rel="stylesheet" href="../markbind/css/markbind.css">
+  <link rel="stylesheet" href="/plugins/markbind-plugin-anchors/markbind-plugin-anchors.css">
   <link rel="stylesheet" href="../markbind/layouts/default/styles.css">
   <link rel="stylesheet" href="../markbind/css/site-nav.css">
 </head>
diff --git a/test/functional/test_site_convert/expected/contents/topic3b.html b/test/functional/test_site_convert/expected/contents/topic3b.html
index 14ad3ca654..66ad57aed4 100644
--- a/test/functional/test_site_convert/expected/contents/topic3b.html
+++ b/test/functional/test_site_convert/expected/contents/topic3b.html
@@ -15,6 +15,7 @@
   <link rel="stylesheet" href="../markbind/css/octicons.css">
   <link rel="stylesheet" href="../markbind/css/github.min.css">
   <link rel="stylesheet" href="../markbind/css/markbind.css">
+  <link rel="stylesheet" href="/plugins/markbind-plugin-anchors/markbind-plugin-anchors.css">
   <link rel="stylesheet" href="../markbind/layouts/default/styles.css">
   <link rel="stylesheet" href="../markbind/css/site-nav.css">
 </head>
diff --git a/test/functional/test_site_convert/expected/index.html b/test/functional/test_site_convert/expected/index.html
index ba07fcb539..c1ecea4e52 100644
--- a/test/functional/test_site_convert/expected/index.html
+++ b/test/functional/test_site_convert/expected/index.html
@@ -15,6 +15,7 @@
   <link rel="stylesheet" href="markbind/css/octicons.css">
   <link rel="stylesheet" href="markbind/css/github.min.css">
   <link rel="stylesheet" href="markbind/css/markbind.css">
+  <link rel="stylesheet" href="/plugins/markbind-plugin-anchors/markbind-plugin-anchors.css">
   <link rel="stylesheet" href="markbind/layouts/default/styles.css">
   <link rel="stylesheet" href="markbind/css/site-nav.css">
 </head>
diff --git a/test/functional/test_site_convert/expected/markbind/css/markbind.css b/test/functional/test_site_convert/expected/markbind/css/markbind.css
index e21c7c4808..24462b16fa 100644
--- a/test/functional/test_site_convert/expected/markbind/css/markbind.css
+++ b/test/functional/test_site_convert/expected/markbind/css/markbind.css
@@ -73,20 +73,6 @@ kbd {
     outline: none !important;
 }
 
-.fa.fa-anchor {
-    color: #ccc;
-    display: inline;
-    font-size: 14px;
-    margin-left: 10px;
-    padding: 3px;
-    text-decoration: none;
-    visibility: hidden;
-}
-
-.fa.fa-anchor:hover {
-    color: #555;
-}
-
 code.hljs.inline {
     background: #f8f8f8;
     color: #333;
diff --git a/test/functional/test_site_convert/expected/markbind/js/setup.js b/test/functional/test_site_convert/expected/markbind/js/setup.js
index c6b54ef24f..d7910b2eb3 100644
--- a/test/functional/test_site_convert/expected/markbind/js/setup.js
+++ b/test/functional/test_site_convert/expected/markbind/js/setup.js
@@ -13,63 +13,47 @@ function scrollToUrlAnchorHeading() {
   }
 }
 
-function flattenModals() {
-  jQuery('.modal').each((index, modal) => {
-    jQuery(modal).detach().appendTo(jQuery('#app'));
-  });
-}
-
 function insertCss(cssCode) {
   const newNode = document.createElement('style');
   newNode.innerHTML = cssCode;
   document.getElementsByTagName('head')[0].appendChild(newNode);
 }
 
-function setupAnchors() {
+function setupAnchorsForFixedNavbar() {
   const headerSelector = jQuery('header');
   const isFixed = headerSelector.filter('.header-fixed').length !== 0;
+  if (!isFixed) {
+    return;
+  }
+
   const headerHeight = headerSelector.height();
   const bufferHeight = 1;
-  if (isFixed) {
-    jQuery('.nav-inner').css('padding-top', `calc(${headerHeight}px)`);
-    jQuery('#content-wrapper').css('padding-top', `calc(${headerHeight}px)`);
-    insertCss(
-      `span.anchor {
-      display: block;
-      position: relative;
-      top: calc(-${headerHeight}px - ${bufferHeight}rem)
-      }`,
-    );
-  }
+  jQuery('.nav-inner').css('padding-top', `calc(${headerHeight}px)`);
+  jQuery('#content-wrapper').css('padding-top', `calc(${headerHeight}px)`);
+  insertCss(
+    `span.anchor {
+    display: block;
+    position: relative;
+    top: calc(-${headerHeight}px - ${bufferHeight}rem)
+    }`,
+  );
   jQuery('h1, h2, h3, h4, h5, h6, .header-wrapper').each((index, heading) => {
     if (heading.id) {
-      jQuery(heading).on('mouseenter',
-                         () => jQuery(heading).find('.fa.fa-anchor').css('visibility', 'visible'));
-      jQuery(heading).on('mouseleave',
-                         () => jQuery(heading).find('.fa.fa-anchor').css('visibility', 'hidden'));
-      if (isFixed) {
-        /**
-         * Fixing the top navbar would break anchor navigation,
-         * by creating empty spans above the <h> tag we can prevent
-         * the headings from being covered by the navbar.
-         */
-        const spanId = heading.id;
-        heading.insertAdjacentHTML('beforebegin', `<span id="${spanId}" class="anchor"></span>`);
-        jQuery(heading).removeAttr('id'); // to avoid duplicated id problem
-      }
+      /**
+       * Fixing the top navbar would break anchor navigation,
+       * by creating empty spans above the <h> tag we can prevent
+       * the headings from being covered by the navbar.
+       */
+      const spanId = heading.id;
+      heading.insertAdjacentHTML('beforebegin', `<span id="${spanId}" class="anchor"></span>`);
+      jQuery(heading).removeAttr('id'); // to avoid duplicated id problem
     }
   });
-  jQuery('.fa-anchor').each((index, anchor) => {
-    jQuery(anchor).on('click', function () {
-      window.location.href = jQuery(this).attr('href');
-    });
-  });
 }
 
 function updateSearchData(vm) {
   jQuery.getJSON(`${baseUrl}/siteData.json`)
     .then((siteData) => {
-      // eslint-disable-next-line no-param-reassign
       vm.searchData = siteData.pages;
     });
 }
@@ -97,9 +81,8 @@ function executeAfterCreatedRoutines() {
 }
 
 function executeAfterMountedRoutines() {
-  flattenModals();
   scrollToUrlAnchorHeading();
-  setupAnchors();
+  setupAnchorsForFixedNavbar();
   MarkBind.executeAfterSetupScripts.resolve();
 }
 
diff --git a/test/functional/test_site_convert/expected/plugins/markbind-plugin-anchors/markbind-plugin-anchors.css b/test/functional/test_site_convert/expected/plugins/markbind-plugin-anchors/markbind-plugin-anchors.css
new file mode 100644
index 0000000000..b5e8ecef24
--- /dev/null
+++ b/test/functional/test_site_convert/expected/plugins/markbind-plugin-anchors/markbind-plugin-anchors.css
@@ -0,0 +1,23 @@
+.fa.fa-anchor {
+    color: #ccc;
+    display: inline;
+    font-size: 14px;
+    margin-left: 10px;
+    padding: 3px;
+    text-decoration: none;
+    visibility: hidden;
+}
+
+.fa.fa-anchor:hover {
+    color: #555;
+}
+
+h1:hover > .fa.fa-anchor,
+h2:hover > .fa.fa-anchor,
+h3:hover > .fa.fa-anchor,
+h4:hover > .fa.fa-anchor,
+h5:hover > .fa.fa-anchor,
+h6:hover > .fa.fa-anchor,
+.header-wrapper:hover > .fa.fa-anchor {
+    visibility: visible;
+}
diff --git a/test/functional/test_site_expressive_layout/expected/index.html b/test/functional/test_site_expressive_layout/expected/index.html
index 7b7901721a..633557f376 100644
--- a/test/functional/test_site_expressive_layout/expected/index.html
+++ b/test/functional/test_site_expressive_layout/expected/index.html
@@ -15,6 +15,7 @@
   <link rel="stylesheet" href="markbind/css/octicons.css">
   <link rel="stylesheet" href="markbind/css/github.min.css">
   <link rel="stylesheet" href="markbind/css/markbind.css">
+  <link rel="stylesheet" href="/test_site_expressive_layout/plugins/markbind-plugin-anchors/markbind-plugin-anchors.css">
   <link rel="stylesheet" href="markbind/layouts/default/styles.css">
 </head>
 
@@ -34,7 +35,7 @@
           Math formulas
         </panel>
         <div></div>
-        <h1 id="welcome-to-markbind">Welcome to Markbind<a class="fa fa-anchor" href="#welcome-to-markbind"></a></h1>
+        <h1 id="welcome-to-markbind">Welcome to Markbind<a class="fa fa-anchor" href="#welcome-to-markbind" onclick="event.stopPropagation()"></a></h1>
         <p>This is a minimalistic template. To learn more about authoring contents in Markbind, visit the <a href="https://markbind.org/userGuide/authoringContents.html">User Guide</a>.</p>
         <p>Variable from page</p>
         <p>Bottom Content</p>
diff --git a/test/functional/test_site_expressive_layout/expected/markbind/css/markbind.css b/test/functional/test_site_expressive_layout/expected/markbind/css/markbind.css
index e21c7c4808..24462b16fa 100644
--- a/test/functional/test_site_expressive_layout/expected/markbind/css/markbind.css
+++ b/test/functional/test_site_expressive_layout/expected/markbind/css/markbind.css
@@ -73,20 +73,6 @@ kbd {
     outline: none !important;
 }
 
-.fa.fa-anchor {
-    color: #ccc;
-    display: inline;
-    font-size: 14px;
-    margin-left: 10px;
-    padding: 3px;
-    text-decoration: none;
-    visibility: hidden;
-}
-
-.fa.fa-anchor:hover {
-    color: #555;
-}
-
 code.hljs.inline {
     background: #f8f8f8;
     color: #333;
diff --git a/test/functional/test_site_expressive_layout/expected/markbind/js/setup.js b/test/functional/test_site_expressive_layout/expected/markbind/js/setup.js
index c6b54ef24f..d7910b2eb3 100644
--- a/test/functional/test_site_expressive_layout/expected/markbind/js/setup.js
+++ b/test/functional/test_site_expressive_layout/expected/markbind/js/setup.js
@@ -13,63 +13,47 @@ function scrollToUrlAnchorHeading() {
   }
 }
 
-function flattenModals() {
-  jQuery('.modal').each((index, modal) => {
-    jQuery(modal).detach().appendTo(jQuery('#app'));
-  });
-}
-
 function insertCss(cssCode) {
   const newNode = document.createElement('style');
   newNode.innerHTML = cssCode;
   document.getElementsByTagName('head')[0].appendChild(newNode);
 }
 
-function setupAnchors() {
+function setupAnchorsForFixedNavbar() {
   const headerSelector = jQuery('header');
   const isFixed = headerSelector.filter('.header-fixed').length !== 0;
+  if (!isFixed) {
+    return;
+  }
+
   const headerHeight = headerSelector.height();
   const bufferHeight = 1;
-  if (isFixed) {
-    jQuery('.nav-inner').css('padding-top', `calc(${headerHeight}px)`);
-    jQuery('#content-wrapper').css('padding-top', `calc(${headerHeight}px)`);
-    insertCss(
-      `span.anchor {
-      display: block;
-      position: relative;
-      top: calc(-${headerHeight}px - ${bufferHeight}rem)
-      }`,
-    );
-  }
+  jQuery('.nav-inner').css('padding-top', `calc(${headerHeight}px)`);
+  jQuery('#content-wrapper').css('padding-top', `calc(${headerHeight}px)`);
+  insertCss(
+    `span.anchor {
+    display: block;
+    position: relative;
+    top: calc(-${headerHeight}px - ${bufferHeight}rem)
+    }`,
+  );
   jQuery('h1, h2, h3, h4, h5, h6, .header-wrapper').each((index, heading) => {
     if (heading.id) {
-      jQuery(heading).on('mouseenter',
-                         () => jQuery(heading).find('.fa.fa-anchor').css('visibility', 'visible'));
-      jQuery(heading).on('mouseleave',
-                         () => jQuery(heading).find('.fa.fa-anchor').css('visibility', 'hidden'));
-      if (isFixed) {
-        /**
-         * Fixing the top navbar would break anchor navigation,
-         * by creating empty spans above the <h> tag we can prevent
-         * the headings from being covered by the navbar.
-         */
-        const spanId = heading.id;
-        heading.insertAdjacentHTML('beforebegin', `<span id="${spanId}" class="anchor"></span>`);
-        jQuery(heading).removeAttr('id'); // to avoid duplicated id problem
-      }
+      /**
+       * Fixing the top navbar would break anchor navigation,
+       * by creating empty spans above the <h> tag we can prevent
+       * the headings from being covered by the navbar.
+       */
+      const spanId = heading.id;
+      heading.insertAdjacentHTML('beforebegin', `<span id="${spanId}" class="anchor"></span>`);
+      jQuery(heading).removeAttr('id'); // to avoid duplicated id problem
     }
   });
-  jQuery('.fa-anchor').each((index, anchor) => {
-    jQuery(anchor).on('click', function () {
-      window.location.href = jQuery(this).attr('href');
-    });
-  });
 }
 
 function updateSearchData(vm) {
   jQuery.getJSON(`${baseUrl}/siteData.json`)
     .then((siteData) => {
-      // eslint-disable-next-line no-param-reassign
       vm.searchData = siteData.pages;
     });
 }
@@ -97,9 +81,8 @@ function executeAfterCreatedRoutines() {
 }
 
 function executeAfterMountedRoutines() {
-  flattenModals();
   scrollToUrlAnchorHeading();
-  setupAnchors();
+  setupAnchorsForFixedNavbar();
   MarkBind.executeAfterSetupScripts.resolve();
 }
 
diff --git a/test/functional/test_site_expressive_layout/expected/plugins/markbind-plugin-anchors/markbind-plugin-anchors.css b/test/functional/test_site_expressive_layout/expected/plugins/markbind-plugin-anchors/markbind-plugin-anchors.css
new file mode 100644
index 0000000000..b5e8ecef24
--- /dev/null
+++ b/test/functional/test_site_expressive_layout/expected/plugins/markbind-plugin-anchors/markbind-plugin-anchors.css
@@ -0,0 +1,23 @@
+.fa.fa-anchor {
+    color: #ccc;
+    display: inline;
+    font-size: 14px;
+    margin-left: 10px;
+    padding: 3px;
+    text-decoration: none;
+    visibility: hidden;
+}
+
+.fa.fa-anchor:hover {
+    color: #555;
+}
+
+h1:hover > .fa.fa-anchor,
+h2:hover > .fa.fa-anchor,
+h3:hover > .fa.fa-anchor,
+h4:hover > .fa.fa-anchor,
+h5:hover > .fa.fa-anchor,
+h6:hover > .fa.fa-anchor,
+.header-wrapper:hover > .fa.fa-anchor {
+    visibility: visible;
+}
diff --git a/test/functional/test_site_special_tags/expected/index.html b/test/functional/test_site_special_tags/expected/index.html
index a314f98f79..312e8f150c 100644
--- a/test/functional/test_site_special_tags/expected/index.html
+++ b/test/functional/test_site_special_tags/expected/index.html
@@ -15,6 +15,7 @@
   <link rel="stylesheet" href="markbind/css/octicons.css">
   <link rel="stylesheet" href="markbind/css/github.min.css">
   <link rel="stylesheet" href="markbind/css/markbind.css">
+  <link rel="stylesheet" href="/plugins/markbind-plugin-anchors/markbind-plugin-anchors.css">
   <link rel="stylesheet" href="markbind/layouts/default/styles.css">
 </head>
 
@@ -22,8 +23,8 @@
   <div id="app">
     <div id="flex-body">
       <div id="content-wrapper">
-        <h1 id="functional-test-for-htmlparser2-and-markdown-it-patches-for-special-tags">Functional test for htmlparser2 and markdown-it patches for special tags<a class="fa fa-anchor" href="#functional-test-for-htmlparser2-and-markdown-it-patches-for-special-tags"></a></h1>
-        <h2 id="so-far-as-to-comply-with-the-commonmark-spec">So far as to comply with the commonmark spec<a class="fa fa-anchor" href="#so-far-as-to-comply-with-the-commonmark-spec"></a></h2>
+        <h1 id="functional-test-for-htmlparser2-and-markdown-it-patches-for-special-tags">Functional test for htmlparser2 and markdown-it patches for special tags<a class="fa fa-anchor" href="#functional-test-for-htmlparser2-and-markdown-it-patches-for-special-tags" onclick="event.stopPropagation()"></a></h1>
+        <h2 id="so-far-as-to-comply-with-the-commonmark-spec">So far as to comply with the commonmark spec<a class="fa fa-anchor" href="#so-far-as-to-comply-with-the-commonmark-spec" onclick="event.stopPropagation()"></a></h2>
         <p>There should be no text between this and the next <code>&lt;hr&gt;</code> tag in the browser, since it is a <code>&lt;script&gt;</code> tag.<br>
           There should be an alert with the value of 2 as well.</p>
         <script>
diff --git a/test/functional/test_site_special_tags/expected/markbind/css/markbind.css b/test/functional/test_site_special_tags/expected/markbind/css/markbind.css
index e21c7c4808..24462b16fa 100644
--- a/test/functional/test_site_special_tags/expected/markbind/css/markbind.css
+++ b/test/functional/test_site_special_tags/expected/markbind/css/markbind.css
@@ -73,20 +73,6 @@ kbd {
     outline: none !important;
 }
 
-.fa.fa-anchor {
-    color: #ccc;
-    display: inline;
-    font-size: 14px;
-    margin-left: 10px;
-    padding: 3px;
-    text-decoration: none;
-    visibility: hidden;
-}
-
-.fa.fa-anchor:hover {
-    color: #555;
-}
-
 code.hljs.inline {
     background: #f8f8f8;
     color: #333;
diff --git a/test/functional/test_site_special_tags/expected/markbind/js/setup.js b/test/functional/test_site_special_tags/expected/markbind/js/setup.js
index c6b54ef24f..d7910b2eb3 100644
--- a/test/functional/test_site_special_tags/expected/markbind/js/setup.js
+++ b/test/functional/test_site_special_tags/expected/markbind/js/setup.js
@@ -13,63 +13,47 @@ function scrollToUrlAnchorHeading() {
   }
 }
 
-function flattenModals() {
-  jQuery('.modal').each((index, modal) => {
-    jQuery(modal).detach().appendTo(jQuery('#app'));
-  });
-}
-
 function insertCss(cssCode) {
   const newNode = document.createElement('style');
   newNode.innerHTML = cssCode;
   document.getElementsByTagName('head')[0].appendChild(newNode);
 }
 
-function setupAnchors() {
+function setupAnchorsForFixedNavbar() {
   const headerSelector = jQuery('header');
   const isFixed = headerSelector.filter('.header-fixed').length !== 0;
+  if (!isFixed) {
+    return;
+  }
+
   const headerHeight = headerSelector.height();
   const bufferHeight = 1;
-  if (isFixed) {
-    jQuery('.nav-inner').css('padding-top', `calc(${headerHeight}px)`);
-    jQuery('#content-wrapper').css('padding-top', `calc(${headerHeight}px)`);
-    insertCss(
-      `span.anchor {
-      display: block;
-      position: relative;
-      top: calc(-${headerHeight}px - ${bufferHeight}rem)
-      }`,
-    );
-  }
+  jQuery('.nav-inner').css('padding-top', `calc(${headerHeight}px)`);
+  jQuery('#content-wrapper').css('padding-top', `calc(${headerHeight}px)`);
+  insertCss(
+    `span.anchor {
+    display: block;
+    position: relative;
+    top: calc(-${headerHeight}px - ${bufferHeight}rem)
+    }`,
+  );
   jQuery('h1, h2, h3, h4, h5, h6, .header-wrapper').each((index, heading) => {
     if (heading.id) {
-      jQuery(heading).on('mouseenter',
-                         () => jQuery(heading).find('.fa.fa-anchor').css('visibility', 'visible'));
-      jQuery(heading).on('mouseleave',
-                         () => jQuery(heading).find('.fa.fa-anchor').css('visibility', 'hidden'));
-      if (isFixed) {
-        /**
-         * Fixing the top navbar would break anchor navigation,
-         * by creating empty spans above the <h> tag we can prevent
-         * the headings from being covered by the navbar.
-         */
-        const spanId = heading.id;
-        heading.insertAdjacentHTML('beforebegin', `<span id="${spanId}" class="anchor"></span>`);
-        jQuery(heading).removeAttr('id'); // to avoid duplicated id problem
-      }
+      /**
+       * Fixing the top navbar would break anchor navigation,
+       * by creating empty spans above the <h> tag we can prevent
+       * the headings from being covered by the navbar.
+       */
+      const spanId = heading.id;
+      heading.insertAdjacentHTML('beforebegin', `<span id="${spanId}" class="anchor"></span>`);
+      jQuery(heading).removeAttr('id'); // to avoid duplicated id problem
     }
   });
-  jQuery('.fa-anchor').each((index, anchor) => {
-    jQuery(anchor).on('click', function () {
-      window.location.href = jQuery(this).attr('href');
-    });
-  });
 }
 
 function updateSearchData(vm) {
   jQuery.getJSON(`${baseUrl}/siteData.json`)
     .then((siteData) => {
-      // eslint-disable-next-line no-param-reassign
       vm.searchData = siteData.pages;
     });
 }
@@ -97,9 +81,8 @@ function executeAfterCreatedRoutines() {
 }
 
 function executeAfterMountedRoutines() {
-  flattenModals();
   scrollToUrlAnchorHeading();
-  setupAnchors();
+  setupAnchorsForFixedNavbar();
   MarkBind.executeAfterSetupScripts.resolve();
 }
 
diff --git a/test/functional/test_site_special_tags/expected/plugins/markbind-plugin-anchors/markbind-plugin-anchors.css b/test/functional/test_site_special_tags/expected/plugins/markbind-plugin-anchors/markbind-plugin-anchors.css
new file mode 100644
index 0000000000..b5e8ecef24
--- /dev/null
+++ b/test/functional/test_site_special_tags/expected/plugins/markbind-plugin-anchors/markbind-plugin-anchors.css
@@ -0,0 +1,23 @@
+.fa.fa-anchor {
+    color: #ccc;
+    display: inline;
+    font-size: 14px;
+    margin-left: 10px;
+    padding: 3px;
+    text-decoration: none;
+    visibility: hidden;
+}
+
+.fa.fa-anchor:hover {
+    color: #555;
+}
+
+h1:hover > .fa.fa-anchor,
+h2:hover > .fa.fa-anchor,
+h3:hover > .fa.fa-anchor,
+h4:hover > .fa.fa-anchor,
+h5:hover > .fa.fa-anchor,
+h6:hover > .fa.fa-anchor,
+.header-wrapper:hover > .fa.fa-anchor {
+    visibility: visible;
+}
diff --git a/test/functional/test_site_special_tags/site.json b/test/functional/test_site_special_tags/site.json
index 5072da6cb2..104346128b 100644
--- a/test/functional/test_site_special_tags/site.json
+++ b/test/functional/test_site_special_tags/site.json
@@ -1,4 +1,5 @@
 {
+  "baseUrl": "",
   "ignore": [
     "_markbind/layouts/*",
     "_markbind/logs/*",
diff --git a/test/functional/test_site_templates/test_default/expected/contents/topic1.html b/test/functional/test_site_templates/test_default/expected/contents/topic1.html
index 5712d82b6a..74c12cd719 100644
--- a/test/functional/test_site_templates/test_default/expected/contents/topic1.html
+++ b/test/functional/test_site_templates/test_default/expected/contents/topic1.html
@@ -15,6 +15,7 @@
   <link rel="stylesheet" href="../markbind/css/octicons.css">
   <link rel="stylesheet" href="../markbind/css/github.min.css">
   <link rel="stylesheet" href="../markbind/css/markbind.css">
+  <link rel="stylesheet" href="/plugins/markbind-plugin-anchors/markbind-plugin-anchors.css">
   <link rel="stylesheet" href="../markbind/layouts/default/styles.css">
   <link rel="stylesheet" href="../markbind/css/site-nav.css">
 </head>
@@ -61,7 +62,7 @@
 
       <div id="content-wrapper">
         <br>
-        <h1 id="topic-1">Topic 1<a class="fa fa-anchor" href="#topic-1"></a></h1>
+        <h1 id="topic-1">Topic 1<a class="fa fa-anchor" href="#topic-1" onclick="event.stopPropagation()"></a></h1>
         <blockquote>
           <p>More content to be added</p>
         </blockquote>
diff --git a/test/functional/test_site_templates/test_default/expected/contents/topic2.html b/test/functional/test_site_templates/test_default/expected/contents/topic2.html
index 211b3e9660..4995506243 100644
--- a/test/functional/test_site_templates/test_default/expected/contents/topic2.html
+++ b/test/functional/test_site_templates/test_default/expected/contents/topic2.html
@@ -15,6 +15,7 @@
   <link rel="stylesheet" href="../markbind/css/octicons.css">
   <link rel="stylesheet" href="../markbind/css/github.min.css">
   <link rel="stylesheet" href="../markbind/css/markbind.css">
+  <link rel="stylesheet" href="/plugins/markbind-plugin-anchors/markbind-plugin-anchors.css">
   <link rel="stylesheet" href="../markbind/layouts/default/styles.css">
   <link rel="stylesheet" href="../markbind/css/site-nav.css">
 </head>
diff --git a/test/functional/test_site_templates/test_default/expected/contents/topic3a.html b/test/functional/test_site_templates/test_default/expected/contents/topic3a.html
index fc00b5284b..89c4910d2e 100644
--- a/test/functional/test_site_templates/test_default/expected/contents/topic3a.html
+++ b/test/functional/test_site_templates/test_default/expected/contents/topic3a.html
@@ -15,6 +15,7 @@
   <link rel="stylesheet" href="../markbind/css/octicons.css">
   <link rel="stylesheet" href="../markbind/css/github.min.css">
   <link rel="stylesheet" href="../markbind/css/markbind.css">
+  <link rel="stylesheet" href="/plugins/markbind-plugin-anchors/markbind-plugin-anchors.css">
   <link rel="stylesheet" href="../markbind/layouts/default/styles.css">
   <link rel="stylesheet" href="../markbind/css/site-nav.css">
 </head>
diff --git a/test/functional/test_site_templates/test_default/expected/contents/topic3b.html b/test/functional/test_site_templates/test_default/expected/contents/topic3b.html
index aeac9a2778..7c77c6e607 100644
--- a/test/functional/test_site_templates/test_default/expected/contents/topic3b.html
+++ b/test/functional/test_site_templates/test_default/expected/contents/topic3b.html
@@ -15,6 +15,7 @@
   <link rel="stylesheet" href="../markbind/css/octicons.css">
   <link rel="stylesheet" href="../markbind/css/github.min.css">
   <link rel="stylesheet" href="../markbind/css/markbind.css">
+  <link rel="stylesheet" href="/plugins/markbind-plugin-anchors/markbind-plugin-anchors.css">
   <link rel="stylesheet" href="../markbind/layouts/default/styles.css">
   <link rel="stylesheet" href="../markbind/css/site-nav.css">
 </head>
diff --git a/test/functional/test_site_templates/test_default/expected/index.html b/test/functional/test_site_templates/test_default/expected/index.html
index 30c9c8b692..79f715f90a 100644
--- a/test/functional/test_site_templates/test_default/expected/index.html
+++ b/test/functional/test_site_templates/test_default/expected/index.html
@@ -15,6 +15,7 @@
   <link rel="stylesheet" href="markbind/css/octicons.css">
   <link rel="stylesheet" href="markbind/css/github.min.css">
   <link rel="stylesheet" href="markbind/css/markbind.css">
+  <link rel="stylesheet" href="/plugins/markbind-plugin-anchors/markbind-plugin-anchors.css">
   <link rel="stylesheet" href="markbind/layouts/default/styles.css">
   <link rel="stylesheet" href="markbind/css/site-nav.css">
   <link rel="stylesheet" href="markbind/css/page-nav.css">
@@ -64,11 +65,11 @@
         <br>
         <div class="jumbotron jumbotron-fluid bg-primary text-white">
           <div class="container">
-            <h1 class="display-4 no-index" id="landing-page-title">Landing Page Title<a class="fa fa-anchor" href="#landing-page-title"></a></h1>
+            <h1 class="display-4 no-index" id="landing-page-title">Landing Page Title<a class="fa fa-anchor" href="#landing-page-title" onclick="event.stopPropagation()"></a></h1>
             <p class="lead">A tagline can go here</p>
           </div>
         </div>
-        <h1 id="heading-1">Heading 1<a class="fa fa-anchor" href="#heading-1"></a></h1>
+        <h1 id="heading-1">Heading 1<a class="fa fa-anchor" href="#heading-1" onclick="event.stopPropagation()"></a></h1>
         <p>Some text some text some text some text some text some text some text. <strong>Some text some text some text some text some text <mark>some text</mark> some text</strong>. Some text some text some text some text some text some text some text some text some text some text some text some text some text some text. Some text some text some text some text some text some text. Some text some text some text some text some text some text some text.</p>
         <p><strong>A block quote:</strong></p>
         <blockquote>
@@ -87,7 +88,7 @@ <h1 id="heading-1">Heading 1<a class="fa fa-anchor" href="#heading-1"></a></h1>
         </ul>
         <p><strong>A <code>code</code> example:</strong></p>
         <pre><code class="hljs html"><span><span class="hljs-tag">&lt;<span class="hljs-name">foo</span>&gt;</span><br></span><span>  <span class="hljs-tag">&lt;<span class="hljs-name">bar</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"name"</span>&gt;</span>goo<span class="hljs-tag">&lt;/<span class="hljs-name">bar</span>&gt;</span><br></span><span><span class="hljs-tag">&lt;/<span class="hljs-name">foo</span>&gt;</span><br></span></code></pre>
-        <h2 id="sub-heading-1-1">Sub Heading 1.1<a class="fa fa-anchor" href="#sub-heading-1-1"></a></h2>
+        <h2 id="sub-heading-1-1">Sub Heading 1.1<a class="fa fa-anchor" href="#sub-heading-1-1" onclick="event.stopPropagation()"></a></h2>
         <p>A <span effect="scale" placement="top" trigger="hover" data-mb-component-type="tooltip" v-b-tooltip.hover.top.html="tooltipInnerContentGetter" class="trigger"><span data-mb-html-for="_content">❗️ some <strong>important explanation</strong></span>tooltip</span>, a <span for="modal:modalinfo" trigger="click" v-b-popover.click.top.html="popoverGenerator" v-b-tooltip.click.top.html="tooltipContentGetter" v-on:click="$refs['modal:modalinfo'].show()" class="trigger-click">modal</span>, a <a href="https://markbind.org/">link</a>, a <span class="badge badge-danger">badge</span>, another <span class="badge badge-warning">badge</span>.</p>
         <b-modal id="modal:modalinfo" hide-footer="" size="" modal-class="mb-zoom" ref="modal:modalinfo"><template slot="modal-title">Modal Title</template>
           Some text some text some text some text some text some text some text. Some text some text some text some text some text some text some text. Some text some text some text some text some text some text some text some text some text some text some text some text some text some text. Some text some text some text some text some text some text. Some text some text some text some text some text some text some text.
@@ -119,7 +120,7 @@ <h2 id="sub-heading-1-1">Sub Heading 1.1<a class="fa fa-anchor" href="#sub-headi
             </tbody>
           </table>
         </div>
-        <h2 id="sub-heading-1-2">Sub Heading 1.2<a class="fa fa-anchor" href="#sub-heading-1-2"></a></h2>
+        <h2 id="sub-heading-1-2">Sub Heading 1.2<a class="fa fa-anchor" href="#sub-heading-1-2" onclick="event.stopPropagation()"></a></h2>
         <p><strong>Media embeds:</strong></p>
         <div class="block-embed block-embed-service-youtube"><iframe type="text/html" src="//www.youtube.com/embed/v40b3ExbM0c" frameborder="0" width="640" height="390" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen></iframe></div>
         <p><strong>Tabs:</strong></p>
@@ -140,7 +141,7 @@ <h2 id="sub-heading-1-2">Sub Heading 1.2<a class="fa fa-anchor" href="#sub-headi
           </tab-group>
         </tabs>
         <br>
-        <h1 id="heading-2">Heading 2<a class="fa fa-anchor" href="#heading-2"></a></h1>
+        <h1 id="heading-2">Heading 2<a class="fa fa-anchor" href="#heading-2" onclick="event.stopPropagation()"></a></h1>
         <p><strong>Some boxes:</strong></p>
         <box>
           default
@@ -167,7 +168,7 @@ <h1 id="heading-2">Heading 2<a class="fa fa-anchor" href="#heading-2"></a></h1>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
         </box>
         <br>
-        <h1 id="heading-3">Heading 3<a class="fa fa-anchor" href="#heading-3"></a></h1>
+        <h1 id="heading-3">Heading 3<a class="fa fa-anchor" href="#heading-3" onclick="event.stopPropagation()"></a></h1>
         <panel type="info"><template slot="_header">
             <p>Expandable panel</p>
           </template>
diff --git a/test/functional/test_site_templates/test_default/expected/markbind/css/markbind.css b/test/functional/test_site_templates/test_default/expected/markbind/css/markbind.css
index e21c7c4808..24462b16fa 100644
--- a/test/functional/test_site_templates/test_default/expected/markbind/css/markbind.css
+++ b/test/functional/test_site_templates/test_default/expected/markbind/css/markbind.css
@@ -73,20 +73,6 @@ kbd {
     outline: none !important;
 }
 
-.fa.fa-anchor {
-    color: #ccc;
-    display: inline;
-    font-size: 14px;
-    margin-left: 10px;
-    padding: 3px;
-    text-decoration: none;
-    visibility: hidden;
-}
-
-.fa.fa-anchor:hover {
-    color: #555;
-}
-
 code.hljs.inline {
     background: #f8f8f8;
     color: #333;
diff --git a/test/functional/test_site_templates/test_default/expected/markbind/js/setup.js b/test/functional/test_site_templates/test_default/expected/markbind/js/setup.js
index c6b54ef24f..d7910b2eb3 100644
--- a/test/functional/test_site_templates/test_default/expected/markbind/js/setup.js
+++ b/test/functional/test_site_templates/test_default/expected/markbind/js/setup.js
@@ -13,63 +13,47 @@ function scrollToUrlAnchorHeading() {
   }
 }
 
-function flattenModals() {
-  jQuery('.modal').each((index, modal) => {
-    jQuery(modal).detach().appendTo(jQuery('#app'));
-  });
-}
-
 function insertCss(cssCode) {
   const newNode = document.createElement('style');
   newNode.innerHTML = cssCode;
   document.getElementsByTagName('head')[0].appendChild(newNode);
 }
 
-function setupAnchors() {
+function setupAnchorsForFixedNavbar() {
   const headerSelector = jQuery('header');
   const isFixed = headerSelector.filter('.header-fixed').length !== 0;
+  if (!isFixed) {
+    return;
+  }
+
   const headerHeight = headerSelector.height();
   const bufferHeight = 1;
-  if (isFixed) {
-    jQuery('.nav-inner').css('padding-top', `calc(${headerHeight}px)`);
-    jQuery('#content-wrapper').css('padding-top', `calc(${headerHeight}px)`);
-    insertCss(
-      `span.anchor {
-      display: block;
-      position: relative;
-      top: calc(-${headerHeight}px - ${bufferHeight}rem)
-      }`,
-    );
-  }
+  jQuery('.nav-inner').css('padding-top', `calc(${headerHeight}px)`);
+  jQuery('#content-wrapper').css('padding-top', `calc(${headerHeight}px)`);
+  insertCss(
+    `span.anchor {
+    display: block;
+    position: relative;
+    top: calc(-${headerHeight}px - ${bufferHeight}rem)
+    }`,
+  );
   jQuery('h1, h2, h3, h4, h5, h6, .header-wrapper').each((index, heading) => {
     if (heading.id) {
-      jQuery(heading).on('mouseenter',
-                         () => jQuery(heading).find('.fa.fa-anchor').css('visibility', 'visible'));
-      jQuery(heading).on('mouseleave',
-                         () => jQuery(heading).find('.fa.fa-anchor').css('visibility', 'hidden'));
-      if (isFixed) {
-        /**
-         * Fixing the top navbar would break anchor navigation,
-         * by creating empty spans above the <h> tag we can prevent
-         * the headings from being covered by the navbar.
-         */
-        const spanId = heading.id;
-        heading.insertAdjacentHTML('beforebegin', `<span id="${spanId}" class="anchor"></span>`);
-        jQuery(heading).removeAttr('id'); // to avoid duplicated id problem
-      }
+      /**
+       * Fixing the top navbar would break anchor navigation,
+       * by creating empty spans above the <h> tag we can prevent
+       * the headings from being covered by the navbar.
+       */
+      const spanId = heading.id;
+      heading.insertAdjacentHTML('beforebegin', `<span id="${spanId}" class="anchor"></span>`);
+      jQuery(heading).removeAttr('id'); // to avoid duplicated id problem
     }
   });
-  jQuery('.fa-anchor').each((index, anchor) => {
-    jQuery(anchor).on('click', function () {
-      window.location.href = jQuery(this).attr('href');
-    });
-  });
 }
 
 function updateSearchData(vm) {
   jQuery.getJSON(`${baseUrl}/siteData.json`)
     .then((siteData) => {
-      // eslint-disable-next-line no-param-reassign
       vm.searchData = siteData.pages;
     });
 }
@@ -97,9 +81,8 @@ function executeAfterCreatedRoutines() {
 }
 
 function executeAfterMountedRoutines() {
-  flattenModals();
   scrollToUrlAnchorHeading();
-  setupAnchors();
+  setupAnchorsForFixedNavbar();
   MarkBind.executeAfterSetupScripts.resolve();
 }
 
diff --git a/test/functional/test_site_templates/test_default/expected/plugins/markbind-plugin-anchors/markbind-plugin-anchors.css b/test/functional/test_site_templates/test_default/expected/plugins/markbind-plugin-anchors/markbind-plugin-anchors.css
new file mode 100644
index 0000000000..b5e8ecef24
--- /dev/null
+++ b/test/functional/test_site_templates/test_default/expected/plugins/markbind-plugin-anchors/markbind-plugin-anchors.css
@@ -0,0 +1,23 @@
+.fa.fa-anchor {
+    color: #ccc;
+    display: inline;
+    font-size: 14px;
+    margin-left: 10px;
+    padding: 3px;
+    text-decoration: none;
+    visibility: hidden;
+}
+
+.fa.fa-anchor:hover {
+    color: #555;
+}
+
+h1:hover > .fa.fa-anchor,
+h2:hover > .fa.fa-anchor,
+h3:hover > .fa.fa-anchor,
+h4:hover > .fa.fa-anchor,
+h5:hover > .fa.fa-anchor,
+h6:hover > .fa.fa-anchor,
+.header-wrapper:hover > .fa.fa-anchor {
+    visibility: visible;
+}
diff --git a/test/functional/test_site_templates/test_minimal/expected/index.html b/test/functional/test_site_templates/test_minimal/expected/index.html
index ecde0a556a..f4c74b7d77 100644
--- a/test/functional/test_site_templates/test_minimal/expected/index.html
+++ b/test/functional/test_site_templates/test_minimal/expected/index.html
@@ -15,6 +15,7 @@
   <link rel="stylesheet" href="markbind/css/octicons.css">
   <link rel="stylesheet" href="markbind/css/github.min.css">
   <link rel="stylesheet" href="markbind/css/markbind.css">
+  <link rel="stylesheet" href="/plugins/markbind-plugin-anchors/markbind-plugin-anchors.css">
   <link rel="stylesheet" href="markbind/layouts/default/styles.css">
   <link rel="stylesheet" href="markbind/css/site-nav.css">
 </head>
@@ -28,7 +29,7 @@
       </nav>
 
       <div id="content-wrapper">
-        <h1 id="welcome-to-markbind">Welcome to Markbind<a class="fa fa-anchor" href="#welcome-to-markbind"></a></h1>
+        <h1 id="welcome-to-markbind">Welcome to Markbind<a class="fa fa-anchor" href="#welcome-to-markbind" onclick="event.stopPropagation()"></a></h1>
         <p>This is a minimalistic template. To learn more about authoring contents in Markbind, visit the <a href="https://markbind.org/userGuide/authoringContents.html">User Guide</a>.</p>
       </div>
 
diff --git a/test/functional/test_site_templates/test_minimal/expected/markbind/css/markbind.css b/test/functional/test_site_templates/test_minimal/expected/markbind/css/markbind.css
index e21c7c4808..24462b16fa 100644
--- a/test/functional/test_site_templates/test_minimal/expected/markbind/css/markbind.css
+++ b/test/functional/test_site_templates/test_minimal/expected/markbind/css/markbind.css
@@ -73,20 +73,6 @@ kbd {
     outline: none !important;
 }
 
-.fa.fa-anchor {
-    color: #ccc;
-    display: inline;
-    font-size: 14px;
-    margin-left: 10px;
-    padding: 3px;
-    text-decoration: none;
-    visibility: hidden;
-}
-
-.fa.fa-anchor:hover {
-    color: #555;
-}
-
 code.hljs.inline {
     background: #f8f8f8;
     color: #333;
diff --git a/test/functional/test_site_templates/test_minimal/expected/markbind/js/setup.js b/test/functional/test_site_templates/test_minimal/expected/markbind/js/setup.js
index c6b54ef24f..d7910b2eb3 100644
--- a/test/functional/test_site_templates/test_minimal/expected/markbind/js/setup.js
+++ b/test/functional/test_site_templates/test_minimal/expected/markbind/js/setup.js
@@ -13,63 +13,47 @@ function scrollToUrlAnchorHeading() {
   }
 }
 
-function flattenModals() {
-  jQuery('.modal').each((index, modal) => {
-    jQuery(modal).detach().appendTo(jQuery('#app'));
-  });
-}
-
 function insertCss(cssCode) {
   const newNode = document.createElement('style');
   newNode.innerHTML = cssCode;
   document.getElementsByTagName('head')[0].appendChild(newNode);
 }
 
-function setupAnchors() {
+function setupAnchorsForFixedNavbar() {
   const headerSelector = jQuery('header');
   const isFixed = headerSelector.filter('.header-fixed').length !== 0;
+  if (!isFixed) {
+    return;
+  }
+
   const headerHeight = headerSelector.height();
   const bufferHeight = 1;
-  if (isFixed) {
-    jQuery('.nav-inner').css('padding-top', `calc(${headerHeight}px)`);
-    jQuery('#content-wrapper').css('padding-top', `calc(${headerHeight}px)`);
-    insertCss(
-      `span.anchor {
-      display: block;
-      position: relative;
-      top: calc(-${headerHeight}px - ${bufferHeight}rem)
-      }`,
-    );
-  }
+  jQuery('.nav-inner').css('padding-top', `calc(${headerHeight}px)`);
+  jQuery('#content-wrapper').css('padding-top', `calc(${headerHeight}px)`);
+  insertCss(
+    `span.anchor {
+    display: block;
+    position: relative;
+    top: calc(-${headerHeight}px - ${bufferHeight}rem)
+    }`,
+  );
   jQuery('h1, h2, h3, h4, h5, h6, .header-wrapper').each((index, heading) => {
     if (heading.id) {
-      jQuery(heading).on('mouseenter',
-                         () => jQuery(heading).find('.fa.fa-anchor').css('visibility', 'visible'));
-      jQuery(heading).on('mouseleave',
-                         () => jQuery(heading).find('.fa.fa-anchor').css('visibility', 'hidden'));
-      if (isFixed) {
-        /**
-         * Fixing the top navbar would break anchor navigation,
-         * by creating empty spans above the <h> tag we can prevent
-         * the headings from being covered by the navbar.
-         */
-        const spanId = heading.id;
-        heading.insertAdjacentHTML('beforebegin', `<span id="${spanId}" class="anchor"></span>`);
-        jQuery(heading).removeAttr('id'); // to avoid duplicated id problem
-      }
+      /**
+       * Fixing the top navbar would break anchor navigation,
+       * by creating empty spans above the <h> tag we can prevent
+       * the headings from being covered by the navbar.
+       */
+      const spanId = heading.id;
+      heading.insertAdjacentHTML('beforebegin', `<span id="${spanId}" class="anchor"></span>`);
+      jQuery(heading).removeAttr('id'); // to avoid duplicated id problem
     }
   });
-  jQuery('.fa-anchor').each((index, anchor) => {
-    jQuery(anchor).on('click', function () {
-      window.location.href = jQuery(this).attr('href');
-    });
-  });
 }
 
 function updateSearchData(vm) {
   jQuery.getJSON(`${baseUrl}/siteData.json`)
     .then((siteData) => {
-      // eslint-disable-next-line no-param-reassign
       vm.searchData = siteData.pages;
     });
 }
@@ -97,9 +81,8 @@ function executeAfterCreatedRoutines() {
 }
 
 function executeAfterMountedRoutines() {
-  flattenModals();
   scrollToUrlAnchorHeading();
-  setupAnchors();
+  setupAnchorsForFixedNavbar();
   MarkBind.executeAfterSetupScripts.resolve();
 }
 
diff --git a/test/functional/test_site_templates/test_minimal/expected/plugins/markbind-plugin-anchors/markbind-plugin-anchors.css b/test/functional/test_site_templates/test_minimal/expected/plugins/markbind-plugin-anchors/markbind-plugin-anchors.css
new file mode 100644
index 0000000000..b5e8ecef24
--- /dev/null
+++ b/test/functional/test_site_templates/test_minimal/expected/plugins/markbind-plugin-anchors/markbind-plugin-anchors.css
@@ -0,0 +1,23 @@
+.fa.fa-anchor {
+    color: #ccc;
+    display: inline;
+    font-size: 14px;
+    margin-left: 10px;
+    padding: 3px;
+    text-decoration: none;
+    visibility: hidden;
+}
+
+.fa.fa-anchor:hover {
+    color: #555;
+}
+
+h1:hover > .fa.fa-anchor,
+h2:hover > .fa.fa-anchor,
+h3:hover > .fa.fa-anchor,
+h4:hover > .fa.fa-anchor,
+h5:hover > .fa.fa-anchor,
+h6:hover > .fa.fa-anchor,
+.header-wrapper:hover > .fa.fa-anchor {
+    visibility: visible;
+}