Question

我有导航的脚本：

$(function () {
    $("a").click(function (e) {
        var target = $(this).attr("href");

        if (target.match("^#")) { // Check to see if we are an anchor link
            e.preventDefault(); // Prevent default only if we are :)

            navigate(target);
        }
    });
});

function navigate(target) {
    var offset = $("header").outerHeight(true);
    var $target = $(target);

    if ($target.length > 0) {
        var position = $target.offset().top - offset;

        $("html, body").animate({
            scrollTop: position
        }, 500);
    }
};

要注意的主要事项是偏移，因为导航是已修复。我的html就是这样的：

<nav id="navigation" class="navbar navbar-main" role="navigation">
    <div class="collapse navbar-collapse">
        <ul class="nav">
            <li class="active">@Html.ActionLink("Home", "Index", "Home")</li>
            <li>@Html.ActionLink("Strategies", "Index", "Strategies")</li>
            <li><a href="#services">Services</a></li>
            <li><a href="#packages">Packages</a></li>
            <li><a href="#work">How we work</a></li>
            <li><a href="#portfolio">Portfolio</a></li>
            <li><a href="#clients">Clients</a></li>
            <li>@Html.ActionLink("Blog", "Index", "Blog")</li>
            <li><a href="#contact">Contact</a></li>
        </ul>
    </div>
</nav>

请注意 hrefs 。他们正在使用正如您所期望的哈希。但正如您所看到的，有2页可以将您带到另一个单独的页面（策略和博客）。在这些页面上，菜单如下所示：

<nav id="navigation" class="navbar navbar-main" role="navigation">
    <div class="collapse navbar-collapse">
        <ul class="nav">
            <li class="@Html.ActivePage("Home", "Index")">@Html.ActionLink("Home", "Index", "Home")</li>
            <li class="@Html.ActivePage("Strategies", "Index")">@Html.ActionLink("Strategies", "Index", "Strategies")</li>
            <li><a href="/#services">Services</a></li>
            <li><a href="/#packages">Packages</a></li>
            <li><a href="/#work">How we work</a></li>
            <li><a href="/#portfolio">Portfolio</a></li>
            <li><a href="/#clients">Clients</a></li>
            <li class="@Html.ActivePage("Blog", "Index")">@Html.ActionLink("Blog", "Index", "Blog")</li>
            <li><a href="/#contact">Contact</a></li>
        </ul>
    </div>
</nav>

唯一的区别是所有链接现在都有 /＃而不是＃，它们首先将它们导航到主页，然后将其移动到位置

因为这是一个普通链接，所以我的导航字符串不会处理它，所以我创建了这个函数：

function getHashtag() {
    var href = location.href; // get the url
    var split = href.split("#"); // split the string; usually there'll be only one # in an url so there'll be only two parts after the splitting

    if (split[1] != null) {
        navigate(split[1]);
    }
}

获取哈希值，然后显式调用我的导航函数。

我的整个脚本现在看起来像这样：

$(function () {
    getHashtag();

    $("a").click(function (e) {
        var target = $(this).attr("href");

        if (target.match("^#")) { // Check to see if we are an anchor link
            e.preventDefault(); // Prevent default only if we are :)

            navigate(target);
        }
    });
});

function getHashtag() {
    var href = location.href; // get the url
    var split = href.split("#"); // split the string; usually there'll be only one # in an url so there'll be only two parts after the splitting

    if (split[1] != null) {
        navigate(split[1]);
    }
}

function navigate(target) {
    var offset = $("header").outerHeight(true);
    var $target = $(target);

    if ($target.length > 0) {
        var position = $target.offset().top - offset;

        $("html, body").animate({
            scrollTop: position
        }, 500);
    }
};

正如您所看到的，我在页面加载后调用 getHashtag ，我需要做的是在加载任何内容之前调用它并覆盖默认操作（可能是e.preventDefault）。有人知道我该怎么做吗？

干杯

Answer 1

你可能会以错误的方式解决这个问题......

您正在谈论防止默认行为。所以你假设有一个事件要回应。有一个你可以听的hashchange事件，但我不知道它是否会在导航到另一个页面时触发。

关于在加载任何内容之前触发脚本：将脚本放在<head> - 标记中，然后在那里触发代码。但是，由于尚未加载任何内容，您也无法跳转到正确的位置，因为文档仍然是空的。

我建议你采用不同的方法：默认情况下，使用css隐藏你的页面。如果在显示任何内容之前要运行的所有JavaScript都已完成，请更改css以显示该页面。这样您就可以完全控制何时显示任何内容。

Answer 2

感谢@Hans我将代码修改为：

$(function () {
    resetPosition();

    $("a").click(function (e) {
        var target = $(this).attr("href");

        if (target.match("^#")) { // Check to see if we are an anchor link
            e.preventDefault(); // Prevent default only if we are :)

            navigate(target);
        }
    });
});

function resetPosition() {
    $("html, body").animate({
        scrollTop: 0
    }, 500, function () {
        var href = location.href; // get the url
        var split = href.split("#"); // split the string; usually there'll be only one # in an url so there'll be only two parts after the splitting

        $(".body").removeClass("ajax");

        if (split[1] != null) {
            navigate("#" + split[1]);
        }
    });
};

function navigate(target) {
    var offset = $("header").outerHeight(true);
    var $target = $(target);

    if ($target.length > 0) {
        var position = $target.offset().top - offset;

        $("html, body").animate({
            scrollTop: position
        }, 500);
    }
};

我的身体周围有一个包装 .body ，每个页面都以一个部分开头，所以我可以像这样创建我的CSS：

.ajax { 
    background-image: url(Images/ajax-loader.gif); background-repeat: no-repeat;
    background-position: center center; height: 500px;
}

.ajax section { 
    display: none; 
}

我将 .ajax 类添加到我的 .body 类中，该类会自动隐藏所有内容。当页面加载时，它将移动到页面顶部，然后当它到达时，它将从 .body 中删除 .ajax 类，显示我们的内容和然后它将滚动到我们的哈希，只有我们有一个。

完美：）

jquery scrollTo在加载之前捕获

2 个答案: