水平单页站点不会“后退”到以前的DIV [英] Horizontal One-Page site won't go "backwards" to previous DIV
问题描述
快速背景：
我一切工作都很顺利，但过了一段时间，我注意到它不再正常工作。回到网页的能力对我来说非常重要，所以我设置了撤消我最近做的任何更改。这没有工作，所以我决定重新创建框架（希望在内容中找到麻烦点），但仍然存在的问题仍然存在。我已经将代码转换为下面的基础。
I had everything working perfectly, but after some time, I noticed it no longer functioned properly. The ability to go back a "page" is extremely important to me, so I set about undoing any recent changes I'd made. That didn't work, so I decided to recreate the framework (hoping to piece in the content to find the trouble spot), yet still the problem persists. I've distilled the code down to the basics below.
我以前可以点击后退按钮，我会立即被带到上一个面板。现在，除了#page_name改变，当前面板移动1px，没有发生任何事情。如果我点击了几个链接（从而存储更多的历史轨迹），然后一旦我再次按下后退按钮，我终于回到一个状态，但不是正确的一个。
I used to be able to hit the back button, and I would be immediately taken to the previous panel. NOW, nothing happens except that the "#page_name" is changed and the current panel shifts 1px. If I've clicked a few links (thereby storing more of a history "trail"), then once I hit the back button a second time, I finally go back a state, but not to the right one.
这里是一个小提琴： http://jsfiddle.net/gz9nW/
JQ
$(document).ready(function(){
$('.main-nav').on('click',function (e) {
e.preventDefault();
var target = $(this).attr("href");
$target = $(target);
$('html, body').stop().animate({
'scrollLeft': $target.offset().left,
'scrollTop': $target.offset().top
}, 900, 'swing', function () {
window.location.hash = target;
});
});
});
CSS
html {
font: 100% 'PT Sans', sans-serif;
height:100%;
width:100%;
margin:0%;
padding:0%;
}
body {
font-size:1.25em;
width:100%;
margin:0%;
padding:0%;
overflow:hidden;
}
header {
width:100%;
position:fixed;
z-index:5000;
top:0%;
left:0%;
padding:0%;
margin:0%;
background:silver;
}
/*################################ NAV ################################*/
nav ul {
list-style:none;
}
nav ul li {
display:inline;
margin-right:5px;
}
/*################################ WRAPPER ################################*/
.wrapper {
width:1000%; /* #PAGES X 100% */
height:100%;
}
/*################################ PAGES ################################*/
.page-container {
width:10%; /* 1 / #PAGES */
display:inline-block;
vertical-align:top;
padding:0%;
margin:0%;
margin-right:-5px;
}
.page-container:nth-child(even) {
background:lightgreen;
}
.page-container:nth-child(odd) {
background:lightblue;
}
.page-contents {
padding:10% 0%;
width:61%;
margin-left:auto;
margin-right:auto;
background:grey;
}
HTML
<body>
<header>
<nav>
<ul>
<li><a class="main-nav" href="#home">Home</a></li>
<li><a class="main-nav" href="#products">Products</a></li>
<li><a class="main-nav" href="#services">Services</a></li>
<li><a class="main-nav" href="#quote">Quote</a></li>
<li><a class="main-nav" href="#about">About</a></li>
<li><a class="main-nav" href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<div class="wrapper">
<div class="page-container" id="home">
<div class="page-contents">
home
</div>
</div>
<div class="page-container" id="products">
<div class="page-contents">
products
</div>
</div>
<div class="page-container" id="part-list">
<div class="page-contents">
part list catalog
</div>
</div>
<div class="page-container" id="services">
<div class="page-contents">
services
</div>
</div>
<div class="page-container" id="quote">
<div class="page-contents">
quote request
</div>
</div>
<div class="page-container" id="about">
<div class="page-contents">
about
</div>
</div>
<div class="page-container" id="contact">
<div class="page-contents">
contact page
</div>
</div>
<div class="page-container" id="inquiries">
<div class="page-contents">
solution inquiries
</div>
</div>
<div class="page-container" id="news">
<div class="page-contents">
news
</div>
</div>
<div class="page-container" id="legal">
<div class="page-contents">
legal info
</div>
</div>
</div>
</body>
这个项目的一个巨大的打击，因为这个特定的功能是我以后。
It's a huge blow to this project, as this specific functionality was something I was after. Any help would be greatly appreciated!
推荐答案
这应该可以解决您的问题：
This should fix your issue:
$(document).ready(function () {
$('.main-nav').on('click', function (e) {
e.preventDefault();
var toTarget = $(this).attr('href');
history.pushState(null, null, toTarget);
$(window).triggerHandler('hashchange');
});
});
$(window).on('hashchange', function () {
if(!window.location.hash) return;
var $target = $(window.location.hash);
$('html, body').stop().animate({
scrollLeft: $target.offset().left,
scrollTop: $target.offset().top
}, 900, 'swing');
});
这篇关于水平单页站点不会“后退”到以前的DIV的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
