Javascript 如何实现返回按钮来动态生成html？

我有单页申请表。所有数据都由ajax检索并在客户端呈现。我有下一个工作流程：

用户打开项目列表。列表有无限滚动条

用户滚动并单击项目

系统发出ajax请求，生成新的html并替换以前的内容

用户单击浏览器的后退按钮

系统更改url（），路由器加载项目并呈现列表。但是卷轴的位置丢失了！因此，用户需要滚动到列表上的上一个位置

---

如何在“后退/下一步”操作期间保持此位置，并为所有项目实施通用解决方案？

返回浏览器按钮会使您更频繁地返回到“缓存”页面，而不是。如果未缓存，则会重新呈现页面。显然，由于HTTP的性质，状态丢失。 我的建议是在列表中存储项目的编号，或者在“Session”变量或“Cache”对象中存储项目值，并在页面加载之前从那里访问它

---

如果会话[“lastSelectedItem”]！=null，然后获取值/数字，并使用jQuery或其他工具将“选择器”设置在正确的位置。

如果您不想或不能使用会话，请尝试使用

历史记录.replaceState（）

如果用户在无限滚动中加载了新的列表项，请替换历史记录状态

history.replaceState（）

，并附加项目计数或最后一个项目ID

---

如果用户单击“上一步”按钮，计算项目计数，加载列表并向下滚动。

只需添加到列表id并滚动到此id即可

<div id="item_1002">content of 1002</div>
<div id="item_1003">content of 1003</div>
<div id="item_1004">
    <span>content of 1004</span>
    <a href="#item_1002">goto 1002</a>
</div>

以下是我的解决方案（咖啡脚本）：

---

有无限滚动，所以一些项目将不会加载，所以它是不可能滚动到他们。但这不是主要问题。问题是，当您单击“后退”时，如何传递id 2位置更改为

http://site.com/#item_ID

我的想法会奏效。基本url应该始终是基本url

http://site.com/

共享这样的url要容易得多。但用户如何使用此规则共享指向当前项目的链接？我认为，如果站点基于ajax，它必须使用基于哈希的导航，但它的you站点：）是的，它使用。但是列表有默认url“/”，itemgood有默认url“/u/{id}”，您有一个位置。但问题是如何理解它是返回还是正常打开页面。如果你有一个以上的列表和从一个项目到另一个项目的链接，这将变得非常棘手。

<script type="text/javascript">
    // scroll to id
    // http://stackoverflow.com/questions/68165/javascript-to-scroll-long-page-to-div

    // need to use this
    // History.Adapter.bind(element,event,callback);
    // but I'm stuck how it works
    // so jQ
    $(document).ready(function(){
        $('a').click(function(){
            // document.getElementById('youridhere').scrollIntoView();
            $(this).scrollIntoView();
            History.pushState({}, 'title', '#item_ID');
        })


        // Bind to StateChange Event
        // Note: We are using statechange instead of popstate
        History.Adapter.bind(window,'statechange',function(){
            // Note: We are using History.getState() instead of event.state
            var State = History.getState();

            $(State.url).scrollIntoView();
        });
    })



</script>

<div id="item_1002">content of 1002</div>
<div id="item_1003">content of 1003</div>
<div id="item_1004">
    <span>content of 1004</span>
    <a href="javascript:">goto 1002</a>
</div>

class window.Explore
  cached_pages = {}

  preserve: (url)=>
    current_position = window.pageYOffset || document.documentElement.scollTop || 0

    cached_pages[url] = 
      position: current_position

  clean: =>
    cached_pages = {}

  scroll_back: (url)=>    
    if cached_pages[url]
      $('body').scrollTop cached_pages[url].position


window.cached_explore = new Explore()

window.prev_state = undefined
window.current_state = undefined

$ ->
  History = window.History
  if !History.enabled
    return false

  History.Adapter.bind window, "statechange", =>
      # store previous history state
      window.prev_state = window.current_state
      window.current_state = History.getState()
      # preserve each page position before leaving
      if window.prev_state and window.prev_state.hash
        window.cached_explore.preserve(window.prev_state.hash)    

      place_match = location.pathname.match(/\/place\/(.*)/)    

      # place page
      if place_match
        # retrieve place      
        window.retrieve_place place_match[1], window.search_query, (err, place_dto) ->        
          # render place page
          window.show_place_popup place_dto        

      # explore places page
      else if location.pathname is '' or location.pathname is '/'
        # check if a page was already opened
        window.renred_explore_page()

        if window.prev_state
          window.cached_explore.scroll_back location.pathname