diff --git a/app/assets/javascripts/discourse/app/components/d-section.js b/app/assets/javascripts/discourse/app/components/d-section.js
index 51976802427..0ca4b4f6e4c 100644
--- a/app/assets/javascripts/discourse/app/components/d-section.js
+++ b/app/assets/javascripts/discourse/app/components/d-section.js
@@ -1,24 +1,35 @@
+import deprecated from "discourse-common/lib/deprecated";
 import Component from "@ember/component";
 import { scrollTop } from "discourse/mixins/scroll-top";
 
 // Can add a body class from within a component, also will scroll to the top automatically.
 export default Component.extend({
-  tagName: "section",
+  tagName: null,
+  pageClass: null,
+  bodyClass: null,
+  scrollTop: true,
 
   didInsertElement() {
     this._super(...arguments);
 
-    const pageClass = this.pageClass;
-    if (pageClass) {
-      $("body").addClass(`${pageClass}-page`);
+    if (this.pageClass) {
+      document.body.classList.add(`${this.pageClass}-page`);
     }
 
-    const bodyClass = this.bodyClass;
-    if (bodyClass) {
-      $("body").addClass(bodyClass);
+    if (this.bodyClass) {
+      document.body.classList.add(this.bodyClass);
     }
 
     if (this.scrollTop === "false") {
+      deprecated("Uses boolean instead of string for scrollTop.", {
+        since: "2.8.0.beta9",
+        dropFrom: "2.9.0.beta1",
+      });
+
+      return;
+    }
+
+    if (!this.scrollTop) {
       return;
     }
 
@@ -27,14 +38,13 @@ export default Component.extend({
 
   willDestroyElement() {
     this._super(...arguments);
-    const pageClass = this.pageClass;
-    if (pageClass) {
-      $("body").removeClass(`${pageClass}-page`);
+
+    if (this.pageClass) {
+      document.body.classList.remove(`${this.pageClass}-page`);
     }
 
-    const bodyClass = this.bodyClass;
-    if (bodyClass) {
-      $("body").removeClass(bodyClass);
+    if (this.bodyClass) {
+      document.body.classList.remove(this.bodyClass);
     }
   },
 });
diff --git a/app/assets/javascripts/discourse/app/templates/d-section.hbs b/app/assets/javascripts/discourse/app/templates/d-section.hbs
new file mode 100644
index 00000000000..200a9f44621
--- /dev/null
+++ b/app/assets/javascripts/discourse/app/templates/d-section.hbs
@@ -0,0 +1 @@
+<section>{{yield}}</section>
diff --git a/app/assets/javascripts/discourse/app/templates/navigation/default.hbs b/app/assets/javascripts/discourse/app/templates/navigation/default.hbs
index 8ce72b8ebe9..df1f1fa5e73 100644
--- a/app/assets/javascripts/discourse/app/templates/navigation/default.hbs
+++ b/app/assets/javascripts/discourse/app/templates/navigation/default.hbs
@@ -1,4 +1,4 @@
-{{#d-section bodyClass="navigation-topics" class="navigation-container" scrollTop="false"}}
+{{#d-section bodyClass="navigation-topics" class="navigation-container" scrollTop=false}}
   {{d-navigation
     filterMode=filterMode
     canCreateTopic=canCreateTopic
diff --git a/app/assets/javascripts/discourse/app/templates/user/activity.hbs b/app/assets/javascripts/discourse/app/templates/user/activity.hbs
index 260e40241c7..6520ce48a8b 100644
--- a/app/assets/javascripts/discourse/app/templates/user/activity.hbs
+++ b/app/assets/javascripts/discourse/app/templates/user/activity.hbs
@@ -1,4 +1,4 @@
-{{#d-section pageClass="user-activity" class="user-secondary-navigation" scrollTop="false"}}
+{{#d-section pageClass="user-activity" class="user-secondary-navigation" scrollTop=false}}
   <nav role="navigation">
     {{#mobile-nav class="activity-nav" desktopClass="action-list activity-list nav-stacked"}}
       {{#d-navigation-item route="userActivity.index"}}{{i18n "user.filters.all"}}{{/d-navigation-item}}