页面跳转前动画加载,页面跳转后记住滚动位置

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

     window.onbeforeunload = onbeforeunload_handler;
    window.onunload = onunload_handler;
    function onbeforeunload_handler() {
        //跳转之前
         $.showLoading();
    };
 
    function onunload_handler () {
        //跳转之后
        $.hideLoading();
    }; 

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

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

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

我们可以在没有刷新之前存储当前滚动条的位置，然后在网站加载的时候读取存储的滚动条位置。这里需要用到window.onbeforeunload()、window.onload()两个方法，具体代码和实现方式如下：

<script>
            window.onbeforeunload = onbeforeunload_handler;
            window.onload = onunload_handler;

            function onbeforeunload_handler() {
                //跳转之前
                var scrollPos;
                if(typeof window.pageYOffset != 'undefined') {
                    scrollPos = window.pageYOffset;
                } else if(typeof document.compatMode != 'undefined' &&
                    document.compatMode != 'BackCompat') {
                    scrollPos = document.documentElement.scrollTop;
                } else if(typeof document.body != 'undefined') {
                    scrollPos = document.body.scrollTop;
                }
                document.cookie = "scrollTop=" + scrollPos; //存储滚动条位置到cookies中
                console.log(scrollPos)
            };

            function onunload_handler() {
                //跳转之后
                if(document.cookie.match(/scrollTop=([^;]+)(;|$)/) != null) {
                    var arr = document.cookie.match(/scrollTop=([^;]+)(;|$)/); //cookies中不为空，则读取滚动条位置
                    document.documentElement.scrollTop = parseInt(arr[1]);
                    document.body.scrollTop = parseInt(arr[1]);
                }
            };

        </script>