jQuery的LocalScroll + hashchange事件浏览器兼容性问题 [英] jQuery LocalScroll + hashchange event browser compatibility issue
问题描述
我要建在这里我使用阿里尔Fleslers jQuery的LocalScroll网站插件，这是我想要做的两件事情：
I'm building a site where I am using Ariel Fleslers jQuery LocalScroll plugin, which I want to do two things:
1）动画滚动时点击一个链接结果锚
2）滚动至$ P $当浏览器的后退按钮pressed pviously参观了锚。
1) Animate a scroll to an anchor when a link is clicked
2) Scroll to the previously visited anchor when the browsers' back button is pressed.
在滚动发生，其中的内容是一个溢出容器内的地方。
The scrolling takes place inside a container where the content is overflowing.
号码一个是直线前进足够了。要acheive二号我做了谷歌搜索的公平一点，但并没有真正找到解决办法，即使我碰到几个职位走过来谁是希望做类似的事情的人。
Number one was straight forward enough. To acheive number two I did a fair bit of googling but didn't really find a solution, even though I came across a few posts by people who were looking to do something similar.
我最终使用本Almans jQuery的hashchange事件与LocalScroll一起插件以acheive所期望的结果，code是这样的：
I ended up using Ben Almans jQuery hashchange event plugin together with LocalScroll to acheive the desired result, the code looks like this:
$(document).ready(function(){
$.localScroll({
hash:true,
target:'#container',
duration:500
});
$(window).hashchange( function(){
var hash = location.hash;
if (hash === ''){
location.hash = '#main';
}
$.localScroll.hash({
reset:false,
hash:true,
target:'#container',
duration:500
});
});
$(window).hashchange();
});
以上code，即使我有点一个黑客（没有双关语意）的，当涉及到编码，做什么，我想在Firefox，浏览器和Opera。不过，我得到的Chrome和Safari不同的问题。
The above code, even though I'm somewhat of a hack (no pun intended) when it comes to coding, does what I want in Firefox, Explorer and Opera. However, I get different issues in Chrome and Safari.
在Chrome中，基本上，点击一个链接时，滚动设置动画，但是当浏览器后退按钮pressed它只是跳转到锚而不动画的过渡。在虽然仔细检查，就好像它在一段时间一次动画后退按钮，但我不能让我的身边，为什么它只做它在某些时候头。
In Chrome, basically, the scroll is animated when a link is clicked, but when the browsers back button is pressed it just jumps to the anchor without animating the transition. On a closer inspection though, it seems like it does animate the back button once in a while, but I can't get my head around why it only does it some of the time.
在Safari浏览器，它跳转到锚而不无论链接是否被点击或后退按钮用于动画。
In Safari, it jumps to the anchor without animating regardless of whether a link is clicked or the back button is used.
动画在Safari工作之前，我实现了hashchange事件的解决方案，当code是这样的：
The animation worked in Safari before I implemented the hashchange event solution, when the code looked like this:
$(document).ready(function() {
$.localScroll({
hash:true,
target:'#container',
duration:500
});
});
有没有人有任何想法，是什么原因造成的Chrome和Safari这些问题？正如我所说的，我是个设计师，而不是一个codeR，这真的是我的伸展能力，可以随意地指出我在code以上，无论他们是否有什么可犯任何错误做这个问题手头与否。
Does anyone have any ideas as to what is causing these issues in Chrome and Safari? As I said, I'm a designer, not a coder, and this is really stretching my abilities so feel free to point out any mistakes I've made in the code above regardless of whether they have nothing to do with the issue at hand or not.
此外，由于沙龙和Ben为这些伟大的插件。
Also, thanks to Ariel and Ben for these great plugins.
的编辑：好了，所以这里还有一个奇怪的事情，当我上传的网站，我在本地运行一个测试服务器，滚动Safari的链接点击的作品，即使完全相同的code不当我运行它关闭服务器的工作。在任何情况下，无论是野生也不铬触发动画时的返回按钮是pressed使得问题仍然存在。的
推荐答案
我曾与这两个插件的严重问题;他们很难使用，功能部件缺乏，和马车。
I had serious issues with both of those plugins; they are hard to use, feature lacking, and buggy.
试试这个组合来代替：
- https://github.com/browserstate/history.js
- https://github.com/balupton/jquery-scrollto
- https://github.com/browserstate/ajaxify
- https://github.com/browserstate/history.js
- https://github.com/balupton/jquery-scrollto
- https://github.com/browserstate/ajaxify
它会处理你的方式滚动更流畅，支持HTML5历史API和工作在所有的浏览器。
It'll handle your scrolling way smoother, support the HTML5 History API and work in all the browsers.
这篇关于jQuery的LocalScroll + hashchange事件浏览器兼容性问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
