0

现在尝试解决这个问题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>

编辑：

单击其中一个导航链接时，出现下一个错误： Uncaught TypeError: Object #about has no method 'stop' Uncaught SyntaxError: Illegal return statement

我意识到 stop() 不应该在那里，但是，违背所有逻辑，这是修复闪烁的唯一方法。

谁能告诉我我在这里做错了什么？：/ 提前致谢。

4

2 回答 2

0

window.location.hash = to仅在 else 范围内，仅在 if (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');
});
于 2013-08-03T17:35:16.787 回答
0

您应该更新您的a标签，因为它们会因为return false. 所以将它们从 更改href="javascript: void(0); return false;"为href="javascript: void(0);"that 将执行相同的操作（不使用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一个字符串（data('to') 是一个字符串）。

希望这可以帮助。

于 2013-08-03T17:14:31.253 回答