diff --git a/language/en-GB/tpl_cassiopeia.ini b/language/en-GB/tpl_cassiopeia.ini
index f33444739c..4a229dea74 100644
--- a/language/en-GB/tpl_cassiopeia.ini
+++ b/language/en-GB/tpl_cassiopeia.ini
@@ -16,6 +16,7 @@ TPL_CASSIOPEIA_FONT_GROUP_WEB="Fonts from Web"
TPL_CASSIOPEIA_FONT_LABEL="Fonts Scheme"
TPL_CASSIOPEIA_FONT_NOTE_TEXT="Loading fonts from external sources might be against privacy regulations in some countries.
Loading fonts from a local folder might have a performance impact on your site."
TPL_CASSIOPEIA_LOGO_LABEL="Logo"
+TPL_CASSIOPEIA_SCROLLTOTOP_LABEL="Scroll-to-top"
TPL_CASSIOPEIA_STATIC="Static"
TPL_CASSIOPEIA_STICKY_LABEL="Sticky Header"
TPL_CASSIOPEIA_TOGGLE="Toggle Navigation"
diff --git a/templates/cassiopeia/index.php b/templates/cassiopeia/index.php
index 96806ae37c..de09201114 100644
--- a/templates/cassiopeia/index.php
+++ b/templates/cassiopeia/index.php
@@ -89,7 +89,6 @@
$this->setMetaData('viewport', 'width=device-width, initial-scale=1');
$stickyHeader = $this->params->get('stickyHeader') ? 'position-sticky sticky-top' : '';
-
?>
@@ -195,20 +194,22 @@
- countModules('footer') || ($this->params->get('backTop') == 1)) : ?>
+ countModules('footer')) : ?>
+ params->get('backToTop') == 1) : ?>
+
+
+
diff --git a/templates/cassiopeia/scss/blocks/_back-to-top.scss b/templates/cassiopeia/scss/blocks/_back-to-top.scss
new file mode 100644
index 0000000000..f2f1b3187d
--- /dev/null
+++ b/templates/cassiopeia/scss/blocks/_back-to-top.scss
@@ -0,0 +1,39 @@
+/**
+ * Back to Top
+ * inspired by https://moderncss.dev/pure-css-smooth-scroll-back-to-top/
+ */
+$scrollLength: 100vh;
+$linkOffset: 5rem;
+
+.back-to-top-wrapper {
+ position: absolute;
+ top: calc(#{$scrollLength} + #{$linkOffset});
+ right: $cassiopeia-grid-gutter;
+ bottom: 0;
+ width: 2.25rem;
+ pointer-events: none;
+
+ @at-root [dir=rtl] & {
+ right: unset;
+ left: $cassiopeia-grid-gutter;
+ }
+}
+
+.back-to-top-link {
+ position: fixed;
+ position: sticky;
+ pointer-events: all;
+ top: calc(#{$scrollLength} - #{$linkOffset});
+ padding: $cassiopeia-grid-gutter/2;
+ color: var(--cassiopeia-color-primary, $standard-color-primary);
+ background-color: var(--white, $white);
+ border: 1px solid transparent;
+ border-radius: $border-radius;
+ transition: border-color 200ms ease-in;
+
+ &:hover,
+ &:focus {
+ color: var(--cassiopeia-color-hover);
+ border-color: var(--cassiopeia-color-primary, $standard-color-primary);
+ }
+}
diff --git a/templates/cassiopeia/scss/blocks/_footer.scss b/templates/cassiopeia/scss/blocks/_footer.scss
index 5e071cfd5b..781f0ac049 100644
--- a/templates/cassiopeia/scss/blocks/_footer.scss
+++ b/templates/cassiopeia/scss/blocks/_footer.scss
@@ -14,22 +14,7 @@
color: currentColor;
}
- .back-top {
- align-self: flex-end;
- height: 40px;
- padding: $cassiopeia-grid-gutter/2;
- margin-left: auto;
- color: var(--cassiopeia-color-primary);
- background: $white;
- border-radius: $border-radius;
- }
-
[dir=rtl] & {
background-image: $cassiopeia-header-grad-rtl;
-
- .back-top {
- margin-right: auto;
- margin-left: 0;
- }
}
}
diff --git a/templates/cassiopeia/scss/blocks/_global.scss b/templates/cassiopeia/scss/blocks/_global.scss
index 4cfa130ffe..ba4ab85559 100644
--- a/templates/cassiopeia/scss/blocks/_global.scss
+++ b/templates/cassiopeia/scss/blocks/_global.scss
@@ -89,3 +89,13 @@ meter {
color: var(--cassiopeia-color-link);
}
}
+
+.awesomplete {
+ input {
+ @include border-right-radius(0);
+ }
+}
+
+body {
+ position: relative;
+}
diff --git a/templates/cassiopeia/scss/template.scss b/templates/cassiopeia/scss/template.scss
index 0ff1a76589..75ae00fd24 100644
--- a/templates/cassiopeia/scss/template.scss
+++ b/templates/cassiopeia/scss/template.scss
@@ -22,6 +22,7 @@
// Blocks
@import "blocks/global"; // Leave this first
@import "blocks/alerts";
+@import "blocks/back-to-top";
@import "blocks/banner";
@import "blocks/footer";
@import "blocks/form";
diff --git a/templates/cassiopeia/templateDetails.xml b/templates/cassiopeia/templateDetails.xml
index d38f2cbdfc..3955a15f31 100644
--- a/templates/cassiopeia/templateDetails.xml
+++ b/templates/cassiopeia/templateDetails.xml
@@ -127,7 +127,7 @@