diff --git a/_sass/components/heading-anchor.scss b/_sass/components/heading-anchor.scss
new file mode 100644
index 0000000000..a38b6d96bf
--- /dev/null
+++ b/_sass/components/heading-anchor.scss
@@ -0,0 +1,12 @@
+// HEADING ANCHOR
+//------------------------------------------------
+//------------------------------------------------
+
+.heading-anchor {
+ visibility: hidden;
+ padding-left: 0.5em;
+
+ &:hover {
+ text-decoration: none;
+ }
+}
diff --git a/_sass/layout/documentation.scss b/_sass/layout/documentation.scss
index 66d4d33c7a..c4e56bd3d4 100644
--- a/_sass/layout/documentation.scss
+++ b/_sass/layout/documentation.scss
@@ -66,6 +66,34 @@
.tag-inline {
float: none;
}
+
+ h1,
+ h3,
+ h4,
+ h5,
+ h6 {
+ .heading-anchor {
+ color: $base-font-color;
+ }
+
+ &:hover {
+ .heading-anchor {
+ visibility: visible;
+ }
+ }
+ }
+
+ h2 {
+ .heading-anchor {
+ color: $brand-tertiary;
+ }
+
+ &:hover {
+ .heading-anchor {
+ visibility: visible;
+ }
+ }
+ }
}
a.new-version-notice {
diff --git a/resources/css/style.scss b/resources/css/style.scss
index c7f0016ba9..938b0974e8 100755
--- a/resources/css/style.scss
+++ b/resources/css/style.scss
@@ -74,3 +74,4 @@
@import 'components/search';
@import 'components/dropdown';
@import 'components/wip-notice';
+@import 'components/heading-anchor.scss';
diff --git a/resources/js/functions.js b/resources/js/functions.js
index b0b0dd6d68..efd41d00d5 100644
--- a/resources/js/functions.js
+++ b/resources/js/functions.js
@@ -662,3 +662,15 @@ $(document).ready(function () {
$('#contributors').html(contributorsHtml);
});
});
+
+$(document).ready(function() {
+ const icon = ''
+ const anchor = ''
+
+ $('.content-primary.documentation').find('h1, h2, h3, h4, h5, h6').each(function() {
+ const id = $(this).attr('id');
+ if (id) {
+ $(this).append($(anchor).attr('href', '#' + id).html(icon));
+ }
+ });
+});