#0018942: Add a "back to top" button

phpList · Aug 10, 2018 · 8ed82bc · 8ed82bc
1 parent 754ad72
commit 8ed82bc
Show file tree

Hide file tree

Showing 6 changed files with 52 additions and 6 deletions.
diff --git a/css/style.css b/css/style.css
diff --git a/footer_minified.inc b/footer_minified.inc
@@ -20,8 +20,11 @@
 	</div> <!-- end #content-->
 
 </div> <!-- end #container-->
+<a id="back-to-top" href="#" class="btn btn-info btn-lg back-to-top" role="button" title="Click to return on the top page" data-toggle="tooltip" data-placement="left"><span class="glyphicon glyphicon-chevron-up"></span></a>
+
 </div> <!-- end .container-fluid -->
 
+
 <script type="text/javascript" src="ui/phplist-ui-bootlist/js/jquery-1.12.1.min.js"></script>
 <script type="text/javascript" src="js/phplistapp.js"></script>
 <script type="text/javascript" src="ui/phplist-ui-bootlist/js/dist/phpList_ui_bootlist.min.js"></script>

diff --git a/js/dist/phpList_ui_bootlist.js b/js/dist/phpList_ui_bootlist.js
@@ -2481,6 +2481,24 @@ $(document).ready(function(){
 		if(window.location.href.indexOf("id=list_categories") > -1)
 			location.reload();
 	});
+
+	/* Back to top */
+	$(window).scroll(function () {
+		if ($(this).scrollTop() > 50) {
+			$('#back-to-top').fadeIn();
+		} else {
+			$('#back-to-top').fadeOut();
+		}
+	});
+	$('#back-to-top').click(function () {
+		$('#back-to-top').tooltip('hide');
+			$('body,html').animate({
+				scrollTop: 0
+			}, 800);
+			return false;
+		});    
+		$('#back-to-top').tooltip('show');
+
 
 }); /* <-- end document.ready */
 ;/*!

diff --git a/js/dist/phpList_ui_bootlist.min.js b/js/dist/phpList_ui_bootlist.min.js
diff --git a/js/phpList3ToBootstrap.js b/js/phpList3ToBootstrap.js
@@ -495,5 +495,23 @@ $(document).ready(function(){
 		if(window.location.href.indexOf("id=list_categories") > -1)
 			location.reload();
 	});
+
+	/* Back to top */
+	$(window).scroll(function () {
+		if ($(this).scrollTop() > 50) {
+			$('#back-to-top').fadeIn();
+		} else {
+			$('#back-to-top').fadeOut();
+		}
+	});
+	$('#back-to-top').click(function () {
+		$('#back-to-top').tooltip('hide');
+			$('body,html').animate({
+				scrollTop: 0
+			}, 800);
+			return false;
+		});    
+		$('#back-to-top').tooltip('show');
+
 
 }); /* <-- end document.ready */
diff --git a/less/legacy.less b/less/legacy.less
@@ -192,6 +192,13 @@ body.messages table.messagesendstats{ width: 49%; float: left; margin-left: 1%;}
 	h1,h2,h3,h4,h5,h6{display:inline;font-weight:bold;font-size:inherit}
 	p{margin-top:0}
 }
+.back-to-top {
+    cursor: pointer;
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    display:none;
+}
 
 
 /* # header *******************/