Add back to top link in documentation

django · Jun 14, 2023 · 192dcb2 · 192dcb2
1 parent 3537d2d
commit 192dcb2
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 9 deletions.
diff --git a/djangoproject/scss/_style.scss b/djangoproject/scss/_style.scss
@@ -2380,10 +2380,11 @@ dt {
 
 #doc-versions,
 #doc-languages,
-#faq-link {
-	margin: 0;
-	padding-top: 0.25em;
-	padding-bottom: 0.25em;
+#faq-link,
+#backtotop-link {
+    margin: 0;
+    padding-top: 0.25em;
+    padding-bottom: 0.25em;
 
 	&.open {
 		li {
@@ -2426,12 +2427,17 @@ dt {
 			border: 1px solid var(--hairline-color);
 			border-radius: 4px;
 
-			&:hover {
-				color: var(--secondary);
-				border: 1px solid $green-light;
-			}
+            &:hover {
+                color: var(--secondary);
+                border: 1px solid $green-light;
+            }
+        }
+
+		a.icon-chevron-up-align {
+			// Should be removed when icon-chevron-up image have the same black space on both sides.
+			padding-right: 11px;
 		}
-	}
+    }
 
 	&:hover {
 		pointer-events: auto;

diff --git a/docs/templates/docs/doc.html b/docs/templates/docs/doc.html
@@ -106,6 +106,11 @@
         </span>
       </li>
     </ul>
+    <ul id="backtotop-link">
+      <li class="current-link">
+        <a href="#top" aria-label="Back to top" class="icon-chevron-up-align"><i class="icon icon-chevron-up"></i></a>
+      </li>
+    </ul>
   </div>
 
   {% block body %}