页面滚动显示返回顶部按钮

ruoyi-admin/src/main/resources/static/ruoyi/css/ry-ui.css

@@ -1033,6 +1033,31 @@ label {
 	padding: 5px;
 }
 
+/** 向上滚动样式 **/
+#scroll-up {
+	border-width: 0;
+	position: fixed;
+	right: 2px;
+	z-index: 99;
+	-webkit-transition-duration: .3s;
+	transition-duration: .3s;
+	opacity: 0;
+	filter: alpha(opacity=0);
+	bottom: -24px;
+	visibility: hidden;
+	background-color: #aaa;
+	color: #fff;
+	font-size: 14px;
+	display: none;
+}
+
+#scroll-up.display {
+	opacity: .7;
+	filter: alpha(opacity=70);
+	bottom: 2px;
+	visibility: visible;
+}
+
 ::-webkit-scrollbar {
     width: 6px;
     height: 10px;

ruoyi-admin/src/main/resources/static/ruoyi/js/common.js

@@ -12,6 +12,11 @@ $(function() {
 		});
 	}
 	
+	// 回到顶部绑定
+	if ($.fn.toTop !== undefined) {
+		$('#scroll-up').toTop();
+	}
+	
 	// select2复选框事件绑定
 	if ($.fn.select2 !== undefined) {
         $.fn.select2.defaults.set( "theme", "bootstrap" );
@@ -154,6 +159,49 @@ $(function() {
 	});
 });
 
+(function ($) {
+    'use strict';
+    $.fn.toTop = function(opt) {
+        var elem = this;
+        var win = $(window);
+        var doc = $('html, body');
+        var options = $.extend({
+            autohide: true,
+            offset: 50,
+            speed: 500,
+            position: true,
+            right: 15,
+            bottom: 5
+        }, opt);
+        elem.css({
+            'cursor': 'pointer'
+        });
+        if (options.autohide) {
+            elem.css('display', 'none');
+        }
+        if (options.position) {
+            elem.css({
+                'position': 'fixed',
+                'right': options.right,
+                'bottom': options.bottom,
+            });
+        }
+        elem.click(function() {
+            doc.animate({
+                scrollTop: 0
+            }, options.speed);
+        });
+        win.scroll(function() {
+            var scrolling = win.scrollTop();
+            if (options.autohide) {
+                if (scrolling > options.offset) {
+                    elem.fadeIn(options.speed);
+                } else elem.fadeOut(options.speed);
+            }
+        });
+    };
+})(jQuery);
+
 /** 刷新选项卡 */
 var refreshItem = function(){
     var topWindow = $(window.parent.document);

ruoyi-admin/src/main/resources/templates/include.html

@@ -42,6 +42,7 @@
 	<script th:src="@{/ruoyi/js/common.js?v=4.1.0}"></script>
 	<script th:src="@{/ruoyi/js/ry-ui.js?v=4.1.0}"></script>
 	<script th:inline="javascript"> var ctx = [[@{/}]]; </script>
+	<a id="scroll-up" href="#" class="btn btn-sm display"><i class="fa fa-angle-double-up"></i></a>
 </div>
 
 <!-- ztree树插件 -->