Question

我构建了一个wordpress主题，既适用于单页面布局，也适用于单独的页面（即远离首页的页面）。与大多数单页面布局一样，您单击导航项并滚动到该部分。我通过给节有一个id然后把那个id放在菜单链接中来实现这个目的（即#about或#contact）。

此代码然后滚动到页面部分：

jQuery(document).ready(function($){
jQuery('a[href*=#]').click(function (e) {
    e.preventDefault();

    var navHeight = jQuery('#header').height();
    var id = jQuery(this).attr('href');
    var scrollTo = jQuery(id).offset().top-navHeight;

    jQuery('html,body').animate({
        'scrollTop': scrollTo
    }, 500);
});

});

我遇到的问题是，当我离开此页面，然后点击通常会向下滚动页面的菜单项时 - 菜单项不起作用。

我尝试使用完整的网址并使用'/ #id'，但这些选项都不起作用。我可以在这里使用解决方法吗？

Answer 1

也许您可以尝试以下代码

jQuery(document).ready(function($){

    // The nav height can be set here if it will be always the same
    var navHeight = jQuery('#header').height();

    // Check if we have a hash (when we come back on the home)
    if( window.location.hash !== "" ) {

        var scrollTo = jQuery(window.location.hash).offset().top-navHeight;

        jQuery('html,body').animate({
            'scrollTop': scrollTo
        }, 500);

    }// if

    // Use your previous code if we're on the home page (thanks WP body_class() )
    jQuery('.home #nav a[href*=#]').click(function (e) {
        e.preventDefault();

        var id = jQuery(this).attr('href');
        var scrollTo = jQuery(id).offset().top-navHeight;

        jQuery('html,body').animate({
            'scrollTop': scrollTo
        }, 500);
    });

});

它可能包含一些错误，或者您可能需要做一些小改动，但总的想法就在这里。

主要的变化是我们只检查当前网址中是否有哈希值，如果是这样的话，我们就会滚动元素。

您需要使用绝对网址（或指向/index.php#lorem）更改菜单的链接，因为您的链接已经是习惯，它不应该对您造成太大影响。

希望它可以帮助你

请记住，我没有对此代码进行测试，因此您可能会面临一些问题。

Answer 2

这是我最终使用的工作。问题是我使用的代码是使用'href'属性作为它应滚动到的部分的ID，这会产生两个问题：

1）当你导航到另一个页面时，如果你的网址只是'#sectionID'，那么它将无法在新页面上运行（除非有一个带有该ID的部分 - 但你可能不希望菜单即使有滚动

2）如果您尝试使用完整的URL（即http://yourwebsite.com/#sectionID），则jquery代码不能将其用作应滚动到的部分的ID。

解决方案非常简单 - 让代码查看不同的属性以获取部分ID - 在这种情况下，我使用'rel'属性，因为它内置于wordpress菜单选项中。

新代码如下所示：

jQuery(document).ready(function($){
jQuery('a[href*=#]').click(function (e) {
    e.preventDefault();

    var navHeight = jQuery('#header').height();
    var id = jQuery(this).attr('rel');
    var scrollTo = jQuery('#' + id).offset().top-navHeight;

    jQuery('html,body').animate({
        'scrollTop': scrollTo
    }, 500);
});

});

现在在菜单选项中，我使用'/＃sectionID'作为链接，'sectionID'作为链接关系。

像魅力一样。

单页滚动导航项在不同页面上不起作用

2 个答案: