问题描述
我正在制作一个'应用'网页。实际页面比隐藏溢出的浏览器视口更宽。点击不同的链接会将CSS变为动画到不同的部分。这是一个非常简单的演示：
按钮代码：
< a href =＃filters>过滤& lt;< / a>
< a href =＃map> Map& gt;< / a>
只需更改页面上向前和向后按钮的锚点，因为它对应于用户所在的位置导航到。这使得浏览器可以跟踪用户在您的页面上的位置。
即使您没有添加实际的锚链接以使哈希标签正常工作，您仍然可以使用javascript的 window.location.hash 属性自己导航用户。
Im making an 'app like' web page. The actual page is wider than the browser viewport which has its overflow hidden. Clicking different links changes the CSS to animate to different sections. Here is a very simple demo:http://smartpeopletalkfast.co.uk/pos/
At this stage im working on a demo, not a production site. I want to intercept the browser back button, so if you've navigated to a section, you would be taken back to the previous section rather than leaving the web page. In a perfect world this would happen with the same animations ive used for navigating to sections.
Can this be achieved? From researching I dont think its possible to intercept and disable the default browser back button.
I know their are a lot of posts about disabling the browser back button on this site and normally the response is DONT! However going to different sections in my page is like navigating to separate pages, so I think what Im trying to achieve is in keeping with user expectations.
The way something similar seems to normally be achieved with AJAX based applications is using HTML5's History API. As I understand you need to add URLs with fragments to the browser's history so something like mysite.com#section2. Im not sure this will work for me however as the horizontal scrolling is not based on fragment links like vertical scrolling can be. Maybe I coulduse JavaScript to detect when the URL ends in a fragment like #section2 and alter the CSS so the 2nd section is in the viewport? I suppose there would be no way to animate to this though?
Use HTML anchor tags when clicking a navigation button (on your page). Thus, scrolling to where the anchor is located (top, left). This behaviour will make the browser's back and forward buttons navigate to the anchors.
Take these for example:
Code for button:
<a href="#filters">Filters <</a>
<a href="#map">Map ></a>
Just change the anchor of the forward and back buttons on your page as it corresponds to where the user is navigating to. This makes the browser keep track of where the user is on your page.
Even if you don't add actual anchor links to make the hash tags work, you can still use javascript's window.location.hash property to navigate the user yourself.
这篇关于更改我的Web应用程序的浏览器后退按钮行为？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！