jQuery滚动动画有效，但window.location.hash把它搞砸了

尝试解决此问题两天都没有成功。

我有一个主导航栏位于一个单一页面的网站。网站上有滚动动画。每当用户单击导航栏中的链接时，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>

编辑：

当点击其中一个导航链接时，我会得到下一个错误：未捕获的类型错误：对象#about没有方法"stop"未捕获的SyntaxError：非法的返回语句

我意识到stop（）不应该存在，但与所有逻辑相反，这是唯一修复闪烁的方法。

有人能告诉我我在这里做错了什么吗？：/提前谢谢。

您应该更新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});
    }
}

我已经从$(this).data('to').stop()中删除了stop()，因为您不能在字符串上调用stop（data（'to'）是一个字符串）。

希望这能有所帮助。

window.location.hash = to仅在else范围内，该范围仅在（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');
});

相关内容

最新更新

热门标签：