单个分页网站的后退按钮 [英] Back Button for a Single Paged Website

问题描述

我有一个单独的分页网站严重依赖jQuery。作为一个产品组合，用户可以点击各种设计，其中jQuery将隐藏主页面，并根据查询字符串返回的内容重新构建设计页面。

问题是，想回到主要投资组合页面的人自然会按下浏览器上的BACK按钮，导致他们回到以前的任何网站（例如Google搜索）。实际上，预期的行为是他们返回到主体。

我的问题是，实现一种方式的最佳方式是什么，以便BACK按钮的功能如下如果它在多页网站上。它会涉及到实现我自己的一堆查询吗？什么是最好的选择。

非常感谢。如果你想看到它的实际运作，这个网站是这里。

https://github.com/browserstate/history.js/

在 $（。mLink）中的事件处理函数中，单击（function（）{...

无论何时触发滚动，您都可以添加如下内容：

  casemL0 ：
 $（html，body）。stop（）。animate（{scrollTop：0}，1000，'easeInOutExpo'）; 
 History.pushState（null，null，？home） ; 
 break; 
 casemL1：
 $（html，body）。stop（）。animate（{scrollTop：（$（'＃filter'）。offset（） 1000;'easeInOutExpo'）; 
 History.pushState（null，null，？portfolio）; 
 break; 
 ... 
  

美丽的投资组合网站，顺便说一句。

I have a single paged website relying heavily on jQuery. As a portfolio, users can click on various designs, in which the jQuery will hide the main page, and reconstruct the design page based on the content returned by a query string.

The problem is, people that would like to go back to the main portfolio page will naturally press the BACK button on their browser, causing them to go back to whatever website they were on previously (e.g. Google Search). When in fact, the intended behaviour is that they return to the main.

My question is, what is the best way to implement a way so that the BACK button functions as if it was on a multipage website. Would it involve implementing my own stack of queries? What is the best option.

Many thanks. The website is here if you'd like to see it in action.

解决方案

Take a look at the History.js library, handles both modern browsers and has fallbacks for older HTML4 browsers

https://github.com/browserstate/history.js/

In your event handler inside $(".mLink").click(function(){...

Whenever you trigger an scroll, you can add something like this

case "mL0":
    $("html, body").stop().animate({ scrollTop: 0}, 1000, 'easeInOutExpo');
    History.pushState(null, null, "?home"); 
    break;
case "mL1":
    $("html, body").stop().animate({ scrollTop: ($('#filter').offset().top-72) }, 1000, 'easeInOutExpo');
    History.pushState(null, null, "?portfolio"); 
    break;
...

Beautiful portfolio site, btw.

这篇关于单个分页网站的后退按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！