检查链接目标与 url

Question

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

我有一个导航栏，其中包含悬停时显示的下拉菜单。我有指向“主页”、“示例页面”或“联系方式”等页面的“全局链接”。在悬停时，其中一些会显示一个下拉菜单，该下拉菜单链接到特定页面的锚点。我想使用平滑滚动脚本从锚点跳转到锚点。这是一张图片来说明这种情况。

现在，我正在使用这个脚本：

$('.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”上并单击“/sample-page#anchor1”链接，页面会平滑滚动到该锚点。但是，如果我在“示例页面”上并单击“/contact#anchor1”，则该链接仅将我定向到“联系人”，但完全忽略了锚点。

对于页面之间的跳转（page1 到 page2 或 page1 到 page2#anchor），平滑滚动绝对没有意义，因此只有在您已经在带有锚点的页面上时才需要激活它。

不知何故，我的脚本需要检查您在哪个页面上。

在这些情况下也必须有所不同： 单击链接时，请检查

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

我希望你能理解我的问题。非常感谢任何帮助！

请记住，我在导航栏中的链接看起来像“/contact#anchor1”或“/sample-page#anchor2”。

这是适合你的小提琴，所以你可以使用我已有的东西：JSFiddle

Answer 1

您可以使用仅返回哈希片段的.hash 来简化此操作。像这样的东西（在代码 cmets 中解释）：

演示：http://jsfiddle.net/2s6MK/1/

$('.test').on('click', function (event) {
    var h = this.hash; // get the hash fragment
    var t = $(h); // get any element using hash fragment as selector
    if (t.length > 0) { // if there are any elements with the id same as hash
        event.preventDefault(); // then prevent the default behavior
        $('html, body').animate({ // and start animating the scroll
            scrollTop: t.offset().top
        }, 1000);
    }
    /*
        If there are no elements with the same id as the hash, 
        it means it belongs to another page. 
        then we do not preventDefault and hence the normal jump to page.
    */
});

编辑：（我忽略了这样一个事实，即跨页面可能存在同名的锚点，并且由于锚点页面名称前缀与当前页面位置不匹配而被小提琴混淆）：

你也可以试试这个：

$('.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中测试。

Answer 2

你可以试试这个

$('.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);
    }
});

这样如果你在当前页面作为内部锚点，你会得到平滑的滚动，否则你直接去链接