Question

我为我的网站构建了一个滚动主页，允许用户点击标题中的链接向下滚动到网站的不同部分。我还有新页面的外部链接，允许用户查看不同的项目无论出于何种原因，它都很有效，但是只要我到达其中一个项目页面，然后尝试单击主页，或者工作链接无法正常工作。没有创建第二个header.php，
如何让nav全球工作。

<script>
$(document).ready(function(){
        $('a.logo, ul.nav a, #mmenu a, a.mobileLogo').bind('click',function(event){
            var $anchor = $(this);

            href_arr = $anchor.attr('href').split("#");

            $('html, body').stop().animate({
                scrollTop: $('#'+href_arr[1]).offset().top - 0
            }, 500);   // it was -70                 
            event.preventDefault();
        }); 
     });
});
</script>

我的链接看起来像这样......

    <a href="/#home">Link</a>
    <a href="/#work">Work</a>

关于如何修复jQuery以便它在外部页面上工作的任何想法？

Answer 1

听起来您的产品页上不存在#home和#work，对吗？如果是这种情况，那么调用event.preventDefault()实际上会阻止浏览器返回主页。在阻止默认行为之前，请尝试检查元素是否存在。如果该元素不存在，浏览器将正常访问该链接。这是一种方法。

$(document).ready(function(){
    $('a.logo, ul.nav a, #mmenu a, a.mobileLogo').bind('click',function(event){
        var hash = '#' + $(this).attr('href').split('#')[1];

        // check if the element exists on your page
        if ($(hash).length) {
            // if so, scroll to it and prevent the default behavior
            $('html, body').stop().animate({
                scrollTop: $(hash).offset().top - 0
            }, 500);
            event.preventDefault();                
        }
    });
});

使用主导航滚动网站问题

1 个答案: