回到顶部

nngkxxdp/src/main/resources/static/impression/css/imperssion.css

@@ -1117,4 +1117,7 @@ a {
 }
 .el-message-box__wrapper~.v-modal {
     opacity: 0 !important;
+}
+.el-backtop{
+    bottom: 320px !important;
 }

nngkxxdp/src/main/resources/static/impression/impression.html

@@ -303,7 +303,9 @@
                         </el-timeline>
                     </div>
                 </div>
+                <el-backtop></el-backtop>
             </div>
+            
         </div>
         <div class="footer">
             <div class="footer_nav">
@@ -329,6 +331,9 @@
                 <img src="./img/tu.png" alt="">
             </div>
         </div>
+
+
+            
     </div>
     <script src="../page/js/constans.js"></script>
     <script src="js/jquery-3.5.1.min.js"></script>
@@ -336,6 +341,26 @@
     <script src="js/vuemin.js"></script> 
     <script src="js/index.js"></script>
     <script src="js/inperssion.js"></script>
+    <script>
+    let goTop = document.getElementsByClassName('goTop')[0];
+        //滑动用到window的onscroll（）的方法
+        window.onscroll = function () {
+            //让谁进行滚动 body html（有的浏览器获取不到body或html），所以做一个兼容的方式
+            //scrollTop据顶部的滑动的距离
+            let res = document.body.scrollTop || document.documentElement.scrollTop;
+            if (res >= 400) {//当大于400px，按钮出现
+                goTop.style.display = 'block';
+            } else {
+                goTop.style.display = 'none';
+            }
+ 
+        }
+        //第二个功能，点击返回功能
+        goTop.onclick = function () {
+            document.body.scrollTop = 0;
+            document.documentElement.scrollTop = 0;
+        }
+    </script>
 </body>
 
 </html>

nngkxxdp/src/main/resources/static/impression/js/inperssion.js

@@ -54,6 +54,7 @@ new Vue({
     methods: {
         beforeLiberation: function () {
             this.parent.pictureType = 0;
+            this.parent.page=1;
             this.getajax();
             $('.beforeLiberation').css("height", "1500px");
             $('.afterLiberation').hide(2000);
@@ -70,6 +71,7 @@ new Vue({
         },
         afterLiberation: function () {
             this.parent.pictureType = 1;
+            this.parent.page=1;
             this.getajax();
             $('.afterLiberation').css("height", "1500px");
             $('.beforeLiberation').hide(2000);
@@ -87,6 +89,7 @@ new Vue({
         },
         eightyYears: function () {
             this.parent.pictureType = 2;
+            this.parent.page=1;
             this.getajax();
             $('.eightyYears').css("height", "1500px");
             $('.beforeLiberation').hide(2000);
@@ -104,6 +107,7 @@ new Vue({
         },
         newCentury: function () {
             this.parent.pictureType = 3;
+            this.parent.page=1;
             this.getajax();
             $('.newCentury').css("height", "1500px");
             $('.beforeLiberation').hide(2000);
@@ -403,7 +407,6 @@ new Vue({
                 }
             }
         },
-
     },
     mounted() {
         window.addEventListener('scroll', this.handleScroll)