zoukankan      html  css  js  c++  java
  • 页面跳转前动画加载,页面跳转后记住滚动位置

    1、移动端点击链接,页面跳转之前的loading执行函数。

     1      window.onbeforeunload = onbeforeunload_handler;
     2     window.onunload = onunload_handler;
     3     function onbeforeunload_handler() {
     4         //跳转之前
     5          $.showLoading();
     6     };
     7  
     8     function onunload_handler () {
     9         //跳转之后
    10         $.hideLoading();
    11     }; 

     2、页面刷新回到原先位子

         在开发的过程中我们经常需要重新加载或者刷新某个画面,已确保数据显示是最新的。但是如果一丁点改变就刷新画面的话,会导致用户体验很差,想想看你好不容易把网页拖到最后,结果点击某个按钮的时候,又跑到顶端;或者网页内容很多,你在网页的某个区域进行操作,操作完毕后却回到顶端,再次操作的时候还得找到那个区域。

          有两种方法可以解决这个问题:ajax部分刷新或者刷新后滚动条位置不变。这里我们先不说ajax的方法,因为在开发过程中可能受需求的限制,你并不需要用ajax的方法。那么如何才能实现网页刷新或者重新加载后滚动条的位置不变那?

    我们可以在没有刷新之前存储当前滚动条的位置,然后在网站加载的时候读取存储的滚动条位置。这里需要用到window.onbeforeunload()、window.onload()两个方法,具体代码和实现方式如下:
     1 <script>
     2             window.onbeforeunload = onbeforeunload_handler;
     3             window.onload = onunload_handler;
     4 
     5             function onbeforeunload_handler() {
     6                 //跳转之前
     7                 var scrollPos;
     8                 if(typeof window.pageYOffset != 'undefined') {
     9                     scrollPos = window.pageYOffset;
    10                 } else if(typeof document.compatMode != 'undefined' &&
    11                     document.compatMode != 'BackCompat') {
    12                     scrollPos = document.documentElement.scrollTop;
    13                 } else if(typeof document.body != 'undefined') {
    14                     scrollPos = document.body.scrollTop;
    15                 }
    16                 document.cookie = "scrollTop=" + scrollPos; //存储滚动条位置到cookies中
    17                 console.log(scrollPos)
    18             };
    19 
    20             function onunload_handler() {
    21                 //跳转之后
    22                 if(document.cookie.match(/scrollTop=([^;]+)(;|$)/) != null) {
    23                     var arr = document.cookie.match(/scrollTop=([^;]+)(;|$)/); //cookies中不为空,则读取滚动条位置
    24                     document.documentElement.scrollTop = parseInt(arr[1]);
    25                     document.body.scrollTop = parseInt(arr[1]);
    26                 }
    27             };
    28 
    29         </script>
  • 相关阅读:
    序列JSON数据和四种AJAX操作方式
    jquery.validate和jquery.form.js实现表单提交
    JQuery Validate使用总结1:
    HOWTO: Include Base64 Encoded Binary Image Data (data URI scheme) in Inline Cascading Style Sheets (CSS)(转)
    SharePoint 2007 使用4.0 .Net
    动态IP解决方案
    取MS CRM表单的URL
    从Iframe或新开的窗口访问MS CRM 2011(转)
    Toggle or Hidden MS CRM Tab
    Windows 2008下修改域用户密码
  • 原文地址:https://www.cnblogs.com/haonanZhang/p/6276927.html
Copyright © 2011-2022 走看看