Add back to top link and format footer

_config.yml

@@ -47,12 +47,19 @@ nav_sort: case_insensitive # default, equivalent to nil
 
 # Footer content
 # appears at the bottom of every page's main content
+
+# Back to top link
+back_to_top: true
+back_to_top_text: "Back to top"
+
 footer_content: "Copyright &copy; 2017-2020 Patrick Marsceill. Distributed by an <a href=\"https://github.com/pmarsceill/just-the-docs/tree/master/LICENSE.txt\">MIT license.</a>"
 
 # Footer last edited timestamp
 last_edit_timestamp: true # show or hide edit time - page must have `last_modified_date` defined in the frontmatter
 last_edit_time_format: "%b %e %Y at %I:%M %p" # uses ruby's time format: https://ruby-doc.org/stdlib-2.7.0/libdoc/time/rdoc/Time.html
 
+
+
 # Footer "Edit this page on GitHub" link text
 gh_edit_link: true # show or hide edit this page link
 gh_edit_link_text: "Edit this page on GitHub"

_layouts/default.html

@@ -29,7 +29,7 @@ layout: table_wrappers
       </footer>
     </div>
     <div class="main-content-wrap js-main-content" tabindex="0">
-      <div class="main-content">
+      <div class="main-content" id="top">
         <div class="page-header js-page-header">
           {% if site.search_enabled != false %}
           <div class="search">
@@ -96,28 +96,37 @@ layout: table_wrappers
 
           {% if site.footer_content != nil or site.last_edit_timestamp or site.gh_edit_link %}
             <hr>
-            <footer role="contentinfo">
+            <footer>
-              {% if site.last_edit_timestamp and site.last_edit_time_format and page.last_modified_date %}
+              {% if site.back_to_top %}
-              <p class="text-small text-grey-dk-000 mb-0">
+              <p><a href="#top">{{ site.back_to_top_text }}</a></p>
-                Page last modified: {{ page.last_modified_date | date: site.last_edit_time_format }}.
-              </p>
               {% endif %}
-              {% 
+              {% if site.footer_content != nil %}
-                if 
+              <p class="text-small text-grey-dk-000 mb-0">{{ site.footer_content }}</p>
+              {% endif %}
+
+              {% if site.last_edit_timestamp or site.gh_edit_link %}
+                <div class="d-flex mt-2">
+                  {% if site.last_edit_timestamp and site.last_edit_time_format and page.last_modified_date %}
+                  <p class="text-small text-grey-dk-000 mb-0 mr-2">
+                  Page last modified: <span class="d-inline-block">{{ page.last_modified_date | date: site.last_edit_time_format }}</span>.
+                  </p>
+                  {% endif %}
+                  {%
+                  if
                   site.gh_edit_link and
                   site.gh_edit_link_text and
                   site.gh_edit_repository and
                   site.gh_edit_branch and
                   site.gh_edit_view_mode
 
-              %}
+                  %}
-              <p class="text-small text-grey-dk-000 mb-0">
+                  <p class="text-small text-grey-dk-000 mb-0">
-                <a href="{{ site.gh_edit_repository }}/{{ site.gh_edit_view_mode }}/{{ site.gh_edit_branch }}/{{ page.path }}">{{ site.gh_edit_link_text }}</a>
+                  <a href="{{ site.gh_edit_repository }}/{{ site.gh_edit_view_mode }}/{{ site.gh_edit_branch }}/{{ page.path }}">{{ site.gh_edit_link_text }}</a>
-              </p>
+                  </p>
-              {% endif %}
+                  {% endif %}
-              {% if site.footer_content != nil %}
+                </div>
-              <p class="text-small text-grey-dk-000 mb-0">{{ site.footer_content }}</p>
               {% endif %}
+
             </footer>
           {% endif %}
 

_sass/base.scss

@@ -14,6 +14,7 @@
 
 html {
   @include fs-4;
+  scroll-behavior: smooth;
 }
 
 body {