$(function() {
$(window).hashchange(function() {
var hash = document.URL.substr(document.URL.indexOf('#') + 1);
var pageid = ["", "frontpage", "animepage", "gallerypage", "none2page", "none3page"];
var color = ["#F1F1F1", "#8CC63F", "#59B9C6", "#F1F1F1", "#F08300", "#000000"];
var left = [0, 2500, 5000, 7500, 10000, 12500];
for (var i = 0; i < pageid.length; i++) {
if (pageid[i] === hash) {
$('#wrapper").animate({scrollLeft:left[i]},800)
$("body").animate({backgroundColor:color[i]},600)
}
}
});
$(window).hashchange();
})试验下来换背景的动画都能够正常工作，而且可以明显感到换背景色之前已经有滚动动画的时间在等待了，但事实上页面直接就跳转至锚点了，只有从其他锚点切回第一个锚点时是正常，其他都没有滚动动画表现。但是在有hash值的锚点处刷新页面后会出现正常滚动动画到锚点处，请问哪里出问题了呢？
解释下
pageid是单个页面里的几个锚点，CSS里已设置了各自left值，现在想实现点击各自标签后以滚动动画跳转至相应某点
之前为每个跳转锚点的对应<a>标签设置了如下脚本，都能够正常滚动，现在想换成上面这个脚本的式样就不行了。
$(".front").click(function() {
$('#wrapper').animate({scrollLeft: 2500}, 800);
});
jQuery
$(window).hashchange(function() {
var hash = document.URL.substr(document.URL.indexOf('#') + 1);
var pageid = ["", "frontpage", "animepage", "gallerypage", "none2page", "none3page"];
var color = ["#F1F1F1", "#8CC63F", "#59B9C6", "#F1F1F1", "#F08300", "#000000"];
var left = [0, 2500, 5000, 7500, 10000, 12500];
for (var i = 0; i < pageid.length; i++) {
if (pageid[i] === hash) {
$('#wrapper").animate({scrollLeft:left[i]},800)
$("body").animate({backgroundColor:color[i]},600)
}
}
});
$(window).hashchange();
})试验下来换背景的动画都能够正常工作，而且可以明显感到换背景色之前已经有滚动动画的时间在等待了，但事实上页面直接就跳转至锚点了，只有从其他锚点切回第一个锚点时是正常，其他都没有滚动动画表现。但是在有hash值的锚点处刷新页面后会出现正常滚动动画到锚点处，请问哪里出问题了呢？
解释下
pageid是单个页面里的几个锚点，CSS里已设置了各自left值，现在想实现点击各自标签后以滚动动画跳转至相应某点
之前为每个跳转锚点的对应<a>标签设置了如下脚本，都能够正常滚动，现在想换成上面这个脚本的式样就不行了。
$(".front").click(function() {
$('#wrapper').animate({scrollLeft: 2500}, 800);
});
jQuery
function doAni(){
.....
if(i<left.length){
i++;
.animate(doAni, 800)
}
}
var i=0;
.animate(doAni, 800)
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/libs/jquery-1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="js/libs/jquery-hashchange-v1.3/jquery.ba-hashchange.min.js"></script> <script type="text/javascript" src="js/libs/jquery.color-2.1.2.min.js"></script>
<style>
html, body {
overflow: hidden;
}
#wrapper {
width: 2500px;
overflow: hidden;
background: aqua;
height: 800px;
position: relative;
}
#box1, #box2, #box3, #box4 {
width: 2500px;
height: 794px;
background: green;
border: 3px solid red;
position: absolute;
color: white;
}
#box1 {
left: 0;
}
#box2 {
left: 2500px;
}
#box3 {
left: 5000px;
}
#box4 {
left: 7500px;
}
</style>
</head>
<body> <div id="wrapper">
<div id="box1">
<a class="tobox1" href="#box1">跳转至盒子1</a>
<a class="tobox2" href="#box2">跳转至盒子2</a>
<a class="tobox3" href="#box3">跳转至盒子3</a>
<a class="tobox4" href="#box4">跳转至盒子4</a>
<div>目标盒子1</div>
</div>
<div id="box2">
<a class="tobox1" href="#box1">跳转至盒子1</a>
<a class="tobox2" href="#box2">跳转至盒子2</a>
<a class="tobox3" href="#box3">跳转至盒子3</a>
<a class="tobox4" href="#box4">跳转至盒子4</a>
<div>目标盒子2</div>
</div>
<div id="box3">
<a class="tobox1" href="#box1">跳转至盒子1</a>
<a class="tobox2" href="#box2">跳转至盒子2</a>
<a class="tobox3" href="#box3">跳转至盒子3</a>
<a class="tobox4" href="#box4">跳转至盒子4</a>
<div>目标盒子3</div>
</div>
<div id="box4">
<a class="tobox1" href="#box1">跳转至盒子1</a>
<a class="tobox2" href="#box2">跳转至盒子2</a>
<a class="tobox3" href="#box3">跳转至盒子3</a>
<a class="tobox4" href="#box4">跳转至盒子4</a>
<div>目标盒子4</div>
</div>
</div> <script>
$(function() {
$(window).hashchange(function() {
var hash = document.URL.substr(document.URL.indexOf('#') + 1);
var pageid = ["box1", "box2", "box3", "box4"];
var color = ["#ffffff", "#8CC63F", "#59B9C6", "#000000"];
var left = [0, 2500, 5000, 7500];
for (var i = 0; i < pageid.length; i++) {
if (pageid[i] === hash) {
$('body').css("background", color[i]);
$('#wrapper').animate({scrollLeft: left[i]}, 1000);
}
}
});
$(window).hashchange();
});
//类似下面单独为一个<a>设置动画事件就可以触发滚动效果
$(function() {
$('.tobox2').click(function() {
$("#wrapper").animate({scrollLeft: 2500}, 1000);
});
});
</script>
</body>
</html>