scroll to top button added

zbeboy · Apr 6, 2017 · 9b24630 · 9b24630
1 parent 43eb6e3
commit 9b24630
Show file tree

Hide file tree

Showing 6 changed files with 62 additions and 23 deletions.
diff --git a/css/sb-admin.css b/css/sb-admin.css
@@ -18,6 +18,22 @@ body.fixed-nav {
     .content-wrapper {
       margin-left: 250px; } }
 
+.scroll-to-top {
+  display: none;
+  position: fixed;
+  right: 15px;
+  bottom: 15px;
+  height: 50px;
+  width: 50px;
+  color: white;
+  text-align: center;
+  line-height: 45px;
+  background: rgba(41, 43, 44, 0.5); }
+  .scroll-to-top:hover, .scroll-to-top:focus {
+    color: white; }
+  .scroll-to-top:hover {
+    background: #292b2c; }
+
 .smaller {
   font-size: 0.7rem; }
 

diff --git a/css/sb-admin.min.css b/css/sb-admin.min.css
diff --git a/index.html b/index.html
@@ -45,39 +45,28 @@
                     <a class="nav-link" href="#"><i class="fa fa-fw fa-edit"></i> Forms</a>
                 </li>
                 <li class="nav-item">
-                    <a class="nav-link nav-link-collapse collapsed" data-toggle="collapse" href="#collapseExample"><i class="fa fa-fw fa-sitemap"></i> Other Components</a>
-                    <ul class="sidebar-second-level collapse" id="collapseExample">
+                    <a class="nav-link nav-link-collapse collapsed" data-toggle="collapse" href="#collapseComponents"><i class="fa fa-fw fa-wrench"></i> Components</a>
+                    <ul class="sidebar-second-level collapse" id="collapseComponents">
                         <li>
-                            <a href="#">Fixed Navigation Layout</a>
+                            <a href="#">Fixed Navigation</a>
                         </li>
                         <li>
-                            <a href="#">Second Level Item</a>
-                        </li>
-                        <li>
-                            <a class="nav-link-collapse collapsed" data-toggle="collapse" href="#collapseExample2">Third Level</a>
-                            <ul class="sidebar-third-level collapse" id="collapseExample2">
-                                <li>
-                                    <a href="#">Third Level Item</a>
-                                </li>
-                                <li>
-                                    <a href="#">Third Level Item</a>
-                                </li>
-                            </ul>
+                            <a href="#">Custom Card Examples</a>
                         </li>
                     </ul>
                 </li>
                 <li class="nav-item">
-                    <a class="nav-link nav-link-collapse collapsed" data-toggle="collapse" href="#collapseExample"><i class="fa fa-fw fa-sitemap"></i> Menu Levels</a>
-                    <ul class="sidebar-second-level collapse" id="collapseExample">
+                    <a class="nav-link nav-link-collapse collapsed" data-toggle="collapse" href="#collapseMulti"><i class="fa fa-fw fa-sitemap"></i> Menu Levels</a>
+                    <ul class="sidebar-second-level collapse" id="collapseMulti">
                         <li>
                             <a href="#">Second Level Item</a>
                         </li>
                         <li>
                             <a href="#">Second Level Item</a>
                         </li>
                         <li>
-                            <a class="nav-link-collapse collapsed" data-toggle="collapse" href="#collapseExample2">Third Level</a>
-                            <ul class="sidebar-third-level collapse" id="collapseExample2">
+                            <a class="nav-link-collapse collapsed" data-toggle="collapse" href="#collapseMulti2">Third Level</a>
+                            <ul class="sidebar-third-level collapse" id="collapseMulti2">
                                 <li>
                                     <a href="#">Third Level Item</a>
                                 </li>
@@ -113,8 +102,8 @@ <h6 class="dropdown-header">New Messages:</h6>
                             <div class="dropdown-message small">I've sent the final files over to you for review. When you're able to sign off of them let me know and we can discuss distribution.</div>
                         </a>
                         <div class="dropdown-divider"></div>
-                        <a class="dropdown-item" href="#">
-                            View All Messages
+                        <a class="dropdown-item small" href="#">
+                            View all messages
                         </a>
                     </div>
                 </li>
@@ -541,6 +530,10 @@ <h6 class="mt-0 mb-1"><a href="#">David Miller</a></h6>
     </div>
     <!-- /.content-wrapper -->
 
+    <a class="scroll-to-top rounded" href="#">
+        <i class="fa fa-chevron-up"></i>
+    </a>
+
     <!-- Bootstrap core JavaScript -->
     <script src="vendor/jquery/jquery.min.js"></script>
     <script src="vendor/tether/tether.min.js"></script>

diff --git a/js/sb-admin.js b/js/sb-admin.js
@@ -1,3 +1,12 @@
+$(document).scroll(function() {
+    var scrollDistance = $(this).scrollTop();
+    if (scrollDistance > 100) {
+        $('.scroll-to-top').fadeIn();
+    } else {
+        $('.scroll-to-top').fadeOut();
+    }
+});
+
 // Chart.js Examples
 
 // -- Set new default font family and font color to mimic Bootstrap's default styling

diff --git a/js/sb-admin.min.js b/js/sb-admin.min.js
diff --git a/scss/_global.scss b/scss/_global.scss
@@ -18,6 +18,27 @@ body.fixed-nav {
     }
 }
 
+// Scroll to top button
+.scroll-to-top {
+    display: none;
+    position: fixed;
+    right: 15px;
+    bottom: 15px;
+    height: 50px;
+    width: 50px;
+    color: white;
+    text-align: center;
+    line-height: 45px;
+    background: fade-out($gray-dark, 0.5);
+    &:hover,
+    &:focus {
+        color: white;
+    }
+    &:hover {
+        background: $gray-dark;
+    }
+}
+
 // Additional Text Helper Class
 .smaller {
     font-size: 0.7rem;