Project Requirements: Click to enter the details page, and then click the return button to return to the original location.

Data list diagram:

Note: The data list query uses ajax, which can load the next page of data by pull-up.
Let me start with a brief idea:
1. First, you should get the loaded data from the list page and store the data in the cache.
2. Get the position of the current scroll bar from the top.
3. The current page of the page currently loaded.

Next is the detailed steps:
1. Get the height of the scroll bar from the top.

/** 
 * Get the distance between the scroll bar and the top 
 * @return {}Support IE6 
 */  
function getScrollTop() {  
    var scrollPos;  
    if (window.pageYOffset) {  
    scrollPos = window.pageYOffset; }  
    else if (document.compatMode && document.compatMode != 'BackCompat')  
    { scrollPos = document.documentElement.scrollTop; }  
    else if (document.body) { scrollPos = document.body.scrollTop; }   
    return scrollPos;   
}

2. Store the currently loaded data in session Storage.
click Session Storage I won't say much about it.

//Data List Storage Page
<ul id="scroller" class="datalist"></ul>
//Get loaded data
var datalistHtml = $("#scroller").html();
//Store in session store
sessionStorage.setItem("datalistHtml", datalistHtml);

3. Click the Enter Details page button to pass in the data id, current page and scroll bar height. (Of course, you can also put the height of your current page and scroll bar into cookie s)

//See details
function queryDetail(recordId){
var scrollPos = getScrollTop();
var datalistHtml = $("#scroller").html();
sessionStorage.setItem("datalistHtml", datalistHtml);
window.location.href="/page/mySportpResult?id="+recordId+"&pageCurrent="+queryPage+"&scrollPos="+scrollPos;
}

4. Click on the Details page to return to the List page

//Return to List Page
function goHistory(){
var pageCurrent = getQueryString("pageCurrent");
var scrollPos = getQueryString("scrollPos");
var token = $.cookie('token');
window.location.href="/page/index？  pageCurrent="+pageCurrent+"&scrollPos="+scrollPos+"&token="+token;
}
//Note: I won't say much about the acquisition of the current page. I don't know how classmates can keep me private.
//Method of obtaining url parameters
function getQueryString(name) { 
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); 
    var r = window.location.search.substr(1).match(reg); 
    if (r != null) return unescape(r[2]); return null; 
}

5. According to the height of the scrollbar, whether it is a new entry page or a return from the details page?

var pageCurrent;
//Getting scroll bar height from url
pageCurrent = getQueryString("pageCurrent");
//Judge whether it is empty
if(pageCurrent == null || pageCurrent == ""){
    pageCurrent = 1;
    loadAll(token,pageCurrent);
}else{
    queryRecord(token,pageCurrent);
}

6. Click Back to Initialize List Page

//If the height of the scroll bar exists, take this method.
function queryRecord(token,pageCurrent){
    //Getting Cached Data from Session Storage
    var value = sessionStorage.getItem("datalistHtml");
    //Put it in the list
    $(".datalist").append(value);
    //Get the height of the scroll bar
    var scrollPos = getQueryString("scrollPos");
    //Empty cached data
    sessionStorage.clear();
    //Setting Height
    window.scrollTo(0,scrollPos);
    //Executing query methods
    loadAll(token,pageCurrent);
}

7. Query method

//This query is mainly ajax query, through paging to control the pull-up load more data
//Initialize queries
function loadAll(token,pageCurrent){
    $('#wrapper').dropload({
        scrollArea : window,
        loadDownFn : function(me){
            queryPage =  pageCurrent+1 ;
            //Pass in the current page and the number of display bars per page
            var jsonData = '{"pageNo":"'+ pageCurrent++ +'","pageSize":"10"}';
            $.ajax({ 
                type: 'POST',
                async: false,
                headers: {'token':token}, 
                url: '/history', 
                data:jsonData,
                dataType:'json',
                success: function(result) { 
                var data = result.value;
                    if(data != null && data != ""){
                        //I won't show you how to concatenate strings.
                            }else{
                                 // locking
                                me.lock();
                                // No data
                                me.noData();
                            }
                            // Delayed loading by 1 second for testing
                            setTimeout(function(){
                            // Insert data into the page and put it at the end
                            $('.datalist').append(strlist);
                             // Every time data is inserted, it must be reset
                              me.resetload();
                            },1000);
                        }
                    }
                },
                error: function(XMLHttpRequest, textStatus, errorThrown) {
                    //Even if the loading error occurs, it has to be reset
                    me.resetload();
                }
            });
        }
    });
}

This is a pull-up load more links, students in need can see: http://www.jq22.com/jquery-info6960.
If you have any questions, you can leave a message and comment with me. We can learn from each other.