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

【问题标题】：Single page scrolling nav items don't work on different page单页滚动导航项目在不同页面上不起作用
【发布时间】：2015-08-05 22:30:22
【问题描述】：

我已经构建了一个 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);
});

});

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

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

【问题讨论】：

你能给我们一个jsFiddle吗？
@DFayet 并不是真正的问题，因为当您导航到站点上的其他页面时会发生问题，并且您无法在 jsFiddle 中复制它。如果您愿意，您可以查看网站本身吗？ thedistractionsband.skizzar.com 向下滚动到歌手并点击查看外部链接
当您在单独的页面上并单击要返回主页并向下滚动的链接时，还是在当前页面上向下滚动？因为只要您没有相应的元素（div），您就无法向下滚动当前页面。我知道这个问题可能很愚蠢，但我真的不明白你的目标：/
@DFayet 是的，我想回到原始页面并向下滚动 - 这就是计划

标签： jquery scroll nav scrollto

【解决方案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);
    });

});

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

主要的变化是我们只检查当前 url 中是否有哈希，如果是，我们在元素上滚动。

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

希望对你有帮助

记住我没有测试过这段代码，所以你可能会遇到一些问题。

【讨论】：

【解决方案2】：

这是我最终使用的解决方法。问题是我使用的代码使用'href'属性作为它应该滚动到的部分的ID，这带来了2个问题：

1) 当您导航到其他页面时，如果您的 URL 只是“#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”作为链接关系。

像魅力一样工作。

【讨论】：