Merge pull request #68 from phpList/back-to-top

#0018942: Add a "back to top" button
phpList · Aug 14, 2018 · 54a9439 · 54a9439
2 parents 754ad72 + ecbc214
commit 54a9439
Show file tree

Hide file tree

Showing 6 changed files with 56 additions and 8 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 *******************/
@@ -274,8 +281,10 @@ body.login {
 body.home table.listing *{white-space:normal}
 body.home td.listingname {width:200px}
 body.home td.listingelement{padding-right:20px;padding-left:20px}
-body.home .btn.btn-info{font-size:14px;display:block;padding:15px 5px;font-family:"Source Sans Pro";color:rgb(255, 255, 255);}
-body.home .btn.btn-info span{display:block;font-size:40px;margin-right:0}
+body.home .btn.btn-info:not(.back-to-top){
+	font-size:14px;display:block;padding:15px 5px;font-family:"Source Sans Pro";color:rgb(255, 255, 255);
+	span{display:block;font-size:40px;margin-right:0}
+} 
 body.home .custom-attribute .btn.btn-info span{font-size:25px}
 body.home .custom-attribute td.listingname{padding-left:40px} 
 body.dashboard h2 span.glyphicon {vertical-align:bottom}