Jquery 检查链接目的地与url

我已经问了一个类似的问题，这导致了更多的问题

我有一个带有下拉菜单的导航栏，在悬停时显示。我有“全球链接”到“主页”、“示例页”或“联系人”等页面。在hover上，其中一些显示了一个下拉列表，链接到特定页面的锚。我想使用平滑滚动脚本从一个锚点跳到另一个锚点。这里有一张图片来说明这种情况

现在，我正在使用以下脚本：

$('.sub-menu .current-menu-item a').on('click', function(event) {
        event.preventDefault();
        var target = $(this).attr('href');
        target = $('#' + target.split('#')[1]);
        if( target.length ) {
            $('html, body').animate({
                scrollTop: target.offset().top
            }, 1000);
        }
    });

如您所见，它依赖CSS类将其功能限制在当前页面（CSS类由PHP分配）。这意味着，如果我在“示例页面”上，单击“/Sample Page#anchor1”链接，页面将平滑地滚动到该锚点。但是，如果我在“示例页面”上并单击“/contact#anchor1”，则链接只会将我指向“contact”，而完全忽略锚

对于页面之间的跳转（page1到page2或page1到page2#anchor），平滑滚动毫无意义，因此只需要在您已经使用anchor访问页面的情况下激活它

不知怎的，我的脚本需要检查你在哪一页

这些情况之间也必须有所不同： 单击链接时，请选中

• 如果链接到同一页面上的锚->运行平滑滚动脚本
• 如果它链接到另一个页面上的锚->不运行脚本，跳到锚
• 如果它链接到一个没有锚的页面->不要运行脚本，跳转到该页面

我希望你能理解我的问题。我真的很感激任何帮助

请记住，我在导航栏中的链接如下所示“/contact#anchor1”或“/sample page#anchor2”

---

这是为您准备的提琴，您可以使用我已有的工具：

您可以通过使用只返回哈希片段的

.hash

来简化此操作。类似这样的内容（在代码注释中解释）：

演示：

编辑：（我忽略了这样一个事实，即页面中可能存在同名的锚，并且由于锚页面名称前缀与当前页面位置不匹配而被fiddle弄糊涂了）：

您也可以尝试以下方法：

$('.test').on('click', function (event) {
    var h = $(this.hash);
    var t = $(this).attr("href").split('#')[0]; // get the page name from href
    var l = window.location.pathname.replace(/\//g,""); // get the pathname from location
    if (t == l) { // if pathname matches the href page name
        event.preventDefault();
        $('html, body').animate({
            scrollTop: h.offset().top
        }, 1000);
    }
});

上面的代码无法在fiddle中测试。

您可以试试这个

$('.sub-menu a').on('click', function(event) {
    var target = $(this).attr('href');
    if(target.split('#')[1].length && target.split('#')[0] == window.location.pathname ) {
        event.preventDefault();
        var targetelement = $('#' + target.split('#')[1]);
        $('html, body').animate({
            scrollTop: targetelement.offset().top
        }, 1000);
    }
});

---

这样，如果您在当前页面上作为内部锚定，您将获得平滑的滚动，否则您只需转到链接

首先，谢谢。我尝试了你的脚本，但当我在页面之间跳转时，它仍然忽略了锚。我认为这是一个问题，我的链接根本没有任何类。。。我通过“.子菜单a”引用它们。。。这有效吗？或者可能链接信息丢失了…？如果你看到我的小提琴，你会注意到顶部有一个锚，它把你带到w3c页面的特定锚定点。所以，它是有效的，应该没有问题。对不起，但在我的情况下没有，我不知道为什么。我怀疑CSS类有问题。My

-标记没有类。我在小提琴上没说清楚。。。对不起，嗯@佩尔泽。我还认为我被小提琴弄糊涂了，犯了一个基本的小错误。锚在页面上的名称相同，因此在这些情况下，我的逻辑将失败。@paelzer:我已将编辑添加到答案中。是的，缺课不重要。您的选择器是正确的。我已经做了一些编辑，如果您的链接格式为“/contact#anchor1”，可能现在就可以使用了

$('.sub-menu a').on('click', function(event) {
    var target = $(this).attr('href');
    if(target.split('#')[1].length && target.split('#')[0] == window.location.pathname ) {
        event.preventDefault();
        var targetelement = $('#' + target.split('#')[1]);
        $('html, body').animate({
            scrollTop: targetelement.offset().top
        }, 1000);
    }
});