单击幻灯片向下页，无法工作。

Question

在这个网站上

www.homepreneurawards.com

单击navbar菜单时，它不会滑到特定的div内容中，会出现什么问题？

 <header class="header type-1">
        <div class="container">
            <div class="logo-block">
                <a class="logo" href="#"><img src="http://homepreneurawards.com/Homepreneur/img/logo.gif" alt=""></a>
            </div>
            <nav class="main-nav">
                <ul class="anchor-navigation">
                    <li><a class="anchor-scroll" href="#aboutbrandavatar">ABOUT</a></li>
                    <li><a class="anchor-scroll" href="#whoishomepreneur">HOMEPRENEUR ?</a></li>
                    <li><a class="anchor-scroll" href="#categories">CATEGORIES</a></li>
                    <li><a class="anchor-scroll" href="#jurymembers">JURY MEMBERS</a></li>
                    <li><a class="anchor-scroll" href="#timeline">PROCESS FLOW</a></li>
                    <li><a class="anchor-scroll" href="#organizers">ORGANIZERS</a></li>
                    <li><a class="anchor-scroll" href="#sponsorspartners">SPONSORS</a></li>
                    <li><a class="anchor-scroll" href="#partnerscontent">PARTNERS</a></li>
                    <li><a class="anchor-scroll" href="#contact">CONTACT US</a></li>
                </ul>
            </nav>
            <button class="cmn-toggle-switch"><span></span></button>
        </div>
    </header>

Answer 1

问题在于您在anchors.navigation.js中的功能

function setImmediateAnchor(anchorObject, time) {
    scrollFlag = 1;
    if (currentAnchor) {  -- THIS LINE
        $('html,body').stop().animate({
            'scrollTop': contentTop[anchorObject.attr('href')].top
        }, time, function() {
            $(scrollLinkSelector).parent().removeClass('active');
            anchorObject.parent().addClass('active');
            window.location.hash = '#/' + anchorObject.attr('href').substr(1);
            currentAnchor = anchorObject.attr('href');
            scrollFlag = 0;
        });
    }
}

条件if ( currentAnchor )失败，因为currentAnchor是空的。您已经将其设置为currentAnchor = window.location.hash.replace('/'，‘)，在加载页面时它将为空，因为在http://www.homepreneurawards.com之后您没有任何url中的任何内容。

有两个解决方案，你一直认为是可行的。

1. 在初始化代码下面添加一个条件，以检查currentAnchor是否为空，然后将其设置为某个值，例如"#initialized“，如下所示。 变量contentTop = {}，contentOffset = 87，currentAnchor = window.location.hash.replace('/'，'')，scrollFlag = 0，scrollLinkSelector =‘.锚-滚动’；-添加此条件。如果( currentAnchor =‘’){currentAnchor=‘#初始化’；}
2. 您只需检查函数setImmediateAnchor中的空值，如下所示，注意第3行并处理空值。 函数setImmediateAnchor(anchorObject，time) { scrollFlag = 1；if (currentAnchor == '‘而今){ --这一行$('html，body').stop().animate({ 'scrollTop'：contentTopanchorObject.attr('href').top }，time，function() {currentAnchor anchorObject.parent().addClass('active')；window.location.hash = '#/‘+ anchorObject.attr('href').substr(1)；currentAnchor = anchorObject.attr('href')；scrollFlag = 0；}

或者您可以使用任何其他可行的方法，核心问题在于不允许滚动的条件，因为您的变量是空的。无论哪种方法，你都能找到可行的办法。

Answer 2

假设一切都在一页上，

<li><a class="anchor-scroll" href="#aboutbrandavatar">ABOUT</a></li>

<div id="#aboutbrandavatar">
  scrolls to here once navbar is clicked
</div>

你也可以试试

<a href="#" name="aboutbrandavatar">

<div id="aboutbrandavatar">
  My div
</div>

Answer 3

看起来您可能是在阻止链接的默认单击操作吗？如果您手动转到链接URL，例如http://www.homepreneurawards.com/#/aboutbrandavatar，您将看到滚动按预期工作，并进一步单击“工作”，而不会出现任何问题。

URL结构看起来也不像标准锚链接，这可能会导致一些问题吗？我希望看到的不是关于布兰达凡达的/#/关于布兰达凡达的。