jQuery滚动动画工作,但window.location.hash将其搞砸了

时间:2013-08-03 12:21:05

标签: jquery animation window.location

现在试图解决这个问题2天没有成功。

我有一个位于单页网站的主导航栏。该网站有一个滚动动画。 每当用户单击导航栏中的链接时,window.location.hash都应该更改。

现在,问题在于改变它。但与此同时,它有闪烁的问题(我无法用e.preventDefault()来解决)。停止闪烁的唯一方法是将stop()添加到window.location.hash。 所以现在我没有闪烁,但window.location.hash不再改变,这不是一件好事。

这是代码

<html>
<body>   <div class="nav">
    <ul class="floatRight">
        <li><a href="javascript: void(0); return false;" data-to="#home">Home</a></li>
        <li><a href="javascript: void(0); return false;" data-to="#about">About</a></li>
        <li><a href="javascript: void(0); return false;" data-to="#platform">Platform</a></li>
        <li><a href="javascript: void(0); return false;" data-to="#investors">Investors</a></li>
        <li><a href="javascript: void(0); return false;" data-to="#team">Team</a></li>
        <li><a href="javascript: void(0); return false;" data-to="#newsPress">News & Press</a></li>
        <li class="last"><a href="javascript: void(0); return false;" data-to="#explained">Startup Explained</a></li>
    </ul>
</div>    

<script type="text/javascript">    

function gotoAndScroll(to){
    if(typeof to == 'string') {
        var diff = (to == '#newsPress')? 74 : 83;
        $.scrollTo( {top: $(to).offset().top - diff}, 1500, {axis:'y',easing:'easeInOutCubic'});
    }
    else if(typeof to == 'number'){
        $.scrollTo({top:Number(to), left:0},{duration:1500});
    }
}

$('.nav a').click(function(e) {

    if($(this).data('to') != '#home')
        gotoAndScroll($(this).data('to'));
    else 
        gotoAndScroll(0);
        window.location.hash = $(this).data('to').stop();
});    

$('a#logo').click(function(e) {
    if($(this).data('to') != '#home')
        gotoAndScroll($(this).data('to'));
    else 
        gotoAndScroll(0);
        window.location.hash = $(this).data('to').stop();
});    

</script>    

</body>
</html>

编辑:

点击其中一个导航链接时,我收到下一个错误: 未捕获的TypeError:对象#about没有方法'stop' 未捕获的SyntaxError:非法返回语句

我意识到stop()不应该存在,但是,对于所有逻辑,这是解决闪烁问题的唯一方法。

谁能告诉我这里我做错了什么? :/ 提前谢谢。

2 个答案:

答案 0 :(得分:0)

由于a,您应该更新return false代码,因为它们会出错。 因此,将它们从href="javascript: void(0); return false;"更改为href="javascript: void(0);",这样做(不使用href)。

进一步删除点击功能中的window.location.hash = $(this).data('to').stop();,并将其添加到gotoAndScroll()功能中,如下所示:

function gotoAndScroll(to){
    if(typeof to == 'string') {
        var diff = (to == '#newsPress')? 74 : 83;
        $.scrollTo( {top: $(to).offset().top - diff}, 1500, {axis:'y',easing:'easeInOutCubic'});
        // Added this line because you always call this function so you could have it in one place.
        window.location.hash = to;

    }
    else if(typeof to == 'number'){
        $.scrollTo({top:Number(to), left:0},{duration:1500});
    }
}

我已从stop()移除了$(this).data('to').stop(),因为您无法在字符串上调用stop(数据(&#39;至&#39;)是一个字符串)。

希望这有帮助。

答案 1 :(得分:0)

window.location.hash = to仅在其他范围内,只有在(to ==“#home”)

时才会运行

你必须对正在设置动画的元素调用stop(),比如“$”:

$('.nav a').click(function(e) {

    if($(this).data('to') != '#home')
        gotoAndScroll($(this).data('to'));
    else 
        gotoAndScroll(0);
        $.stop();
    window.location.hash = $(this).data('to');
});    

$('a#logo').click(function(e) {
    if($(this).data('to') != '#home')
        gotoAndScroll($(this).data('to'));
    else 
        gotoAndScroll(0);
        $.stop();
    window.location.hash = $(this).data('to');
});