返回上一页离开位置

最新推荐文章于 2021-06-04 10:38:00 发布

原创最新推荐文章于 2021-06-04 10:38:00 发布 · 429 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#返回上一页离开位置

html 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种在用户从详情页面返回时能够保持之前浏览状态的方法，包括页面滚动位置和分页状态。通过使用localStorage来存储和恢复这些状态，提高了用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

返回上一页访问位置

html代码

<a id="instrument_detail"class="item__btn-more" href="${ctx}instrument_detail?id=" + info.id + "">详情 →<a>

改动前代码

  <script>
    var info = "";
    $(function () {
        var flag = false;
        var visiblePages = 7;
        var condition = {};
        condition.pageNum = 1;
        condition.pageSize = 10;

        function getpage(condition) {
            $(".loading").removeClass("hidden");
            $.ajax({
                type: 'POST',
                url: "${ctx}/instrument_overview.json",
                data: JSON.stringify(condition),
                success: function (data) {
                    $(".loading").addClass("hidden");
                    if (data.object.pageCount != 0) {
                        if (flag) {
                            flag = false;
                            $('#pagination').remove();
                            $("#pagination-box").append(' <ul id="pagination" class="am-pagination tpl-pagination am-pagination-right"></ul>');
                        }

                        $('#pagination').twbsPagination({
                            totalPages: data.object.pageCount,
                            visiblePages: visiblePages,
                            startPage: 1,  //默认分页第一页开始
                            first: "首页",
                            prev: "上一页",
                            next: "下一页",
                            last: "尾页",
                            initiateStartPageClick: false,
                            onPageClick: function (event, page) {
                                flag = false;
                                condition.pageNum = page;
                                getpage(condition);
                            }
                        });
                        getInfo(data.object.list);
                        html_model(data.object.list);

                    }
                },
                contentType: "application/json;charset=utf-8",
                dataType: 'json'
            });

        }
        getpage(condition);
    })
</script>

改动后代码

<script>
    var info = "";
    $(function () {
    /////////////////////////////////////////////////////////////////
       $('#main').delegate("#instrument_detail", "click", function () {          //记录点击详情时所在scrollTop位置
            var scrollTop = 0;
            if (document.documentElement && document.documentElement.scrollTop) {
                scrollTop = document.documentElement.scrollTop;
            } else if (document.body) {
                scrollTop = document.body.scrollTop;
            }
            localStorage.setItem("ScrollTop", scrollTop);    //     localStorage这个缓存对象  
        })
        /////////////////////////////////////////////////////////////////

        var flag = false;
        var visiblePages = 7;
        var condition = {};
        condition.pageNum = 1;
        condition.pageSize = 10;

        function getpage(condition) {
            $(".loading").removeClass("hidden");
            $.ajax({
                type: 'POST',
                url: "${ctx}/instrument_overview.json",
                data: JSON.stringify(condition),
                success: function (data) {
                    /////////////////////////////////////////////////////////////
                    localStorage.setItem("pageNum", condition.pageNum);      //记录访问页面时 当前所在页码
                    if (localStorage.getItem("pageNum") != null) {
                        if (localStorage.getItem("ScrollTop") != null) {
                            $("html,body").animate({scrollTop: localStorage.getItem("ScrollTop")});   //ajax success 成功时 把页面调整到记录的scrollTop位置
                            localStorage.setItem("ScrollTop", null);    //清空scrollTop避免刷新还是这个位置
                        }
                    }
/////////////////////////////////////////////////////////////////
                    $(".loading").addClass("hidden");
                    if (data.object.pageCount != 0) {
                        if (flag) {
                            flag = false;
                            $('#pagination').remove();
                            $("#pagination-box").append(' <ul id="pagination" class="am-pagination tpl-pagination am-pagination-right"></ul>');    //分页上下页按钮
                        }
                        var startNum = 1;
/////////////////////////////////////////////////////////////////
                      if (localStorage.getItem("pageNum") != 1 && localStorage.getItem("pageNum") != null) {
                            startNum = parseInt(localStorage.getItem("pageNum"));    //把访问前的页码在返回成功后设置为当前页码
                        }
                        /////////////////////////////////////////////////////////////////
                        $('#pagination').twbsPagination({
                            totalPages: data.object.pageCount,
                            visiblePages: visiblePages,
/////////////////////////////////////////////////////////////////
                            startPage: startNum,
/////////////////////////////////////////////////////////////////
                            first: "首页",
                            prev: "上一页",
                            next: "下一页",
                            last: "尾页",
                            initiateStartPageClick: false,
                            onPageClick: function (event, page) {
                                localStorage.clear();
                                flag = false;
/////////////////////////////////////////////////////////////////
                                if (localStorage.getItem("pageNum") != null) {   //判断是页面载时的页码  如果是页面为详情返回操作，则把页面调整为访问前设置的页码
                                    condition.pageNum = localStorage.getItem("pageNum");
                                } else {
                                    condition.pageNum = page;                   }/////////////////////////////////////////////////////////////////
                                getpage(condition);
                            }
                        });
                        getInfo(data.object.list);
                        html_model(data.object.list);
                    }
                },
                contentType: "application/json;charset=utf-8",
                dataType: 'json'
            });
/////////////////////////////////////////////////////////////////        }
condition.pageNum = localStorage.getItem("pageNum");   ///记录访问前的页码
/////////////////////////////////////////////////////////////////
        getpage(condition);
    })
</script>

实现过程

1，页面加载时，点击详情，获取本页面的pageNum 和scrollTop 位置。
2，离开页面，跳转详情页面是，把读取的数据存入 localStorage 里面。
3，点击详情页面跳转后，再次点击返回读取localStorage数据把页面设置成读取的数据（pageNum赋值，设置scrollTop ）
4，设置成功后，清空数据避免页面刷新重复设置。