Question

我已经问了一个类似的问题，导致一路上出现更多问题。

我有一个带有下拉菜单的导航栏，可以在悬停时显示。我有“全局链接”到“Home”，“Sample-Page”或“Contact”等页面。在悬停时，其中一些显示链接到特定页面的锚点的下拉列表。我想使用平滑的滚动脚本从锚点跳转到锚点。这是一张图片来说明情况。

enter image description here

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

$('.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”，该页面将平滑地滚动到该锚点。但是，如果我在“Sample-Page”并单击“/ contact＃anchor1”，则该链接仅指向“Contact”，但完全忽略该锚点。

对于页面之间的跳转（第1页到第2页或第1页到第2页＃锚），平滑滚动绝对没有意义，所以只有当你已经在带有锚点的页面上时才需要激活它。

不知何故，我的脚本需要检查你是哪个页面。

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

如果它链接到同一页面上的锚点 - ＆gt;运行流畅的滚动脚本
如果它链接到另一个页面上的锚点 - ＆gt;不要运行脚本，跳转到锚点
如果它链接到没有锚点的页面 - ＆gt;不要运行脚本，跳转到页面

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

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

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

Answer 1

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

演示：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);
    }
});

上述代码无法在小提琴中进行测试。

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);
    }
});

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

检查链接目的地与网址

2 个答案: