4

我正在使用 History.pushState 将我的站点 URL 更改为 /name，它正在工作，但页面不会滚动到它应该滚动到的站点位置。

索引.php：

<nav>
    <ul>
        <li><a href="#work">Work</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#services">Services</a></li>
        <li>Blog <!-- Coming Soon... --> </li>
        <li><a href="#contact">Contact</a></li>
    </ul>
</nav>

<article class="content" id="work"> 
...

<article class="content" id="about">
...

jquery.page.js：

_saveState = function( chapter ) {

    if (History.getState().url.queryStringToJSON().chapter !== chapter) {
        var page;

        if (chapter == 1)
            page = "/work";

        if (chapter == 2)
            page = "/about";

        if (chapter == 3)
            page = "/services";

        if (chapter == 4)
            page = "/blog";

        if (chapter == 5)
            page = "/contact";

        else 
            page = '?chapter=' + chapter;

        History.pushState(null, null, page)
    }
},

...

_goto = function( chapter ) {

    var chapter = chapter || History.getState().url.queryStringToJSON().chapter,
    isHome = ( chapter === undefined ),

    $article    = $( chapter ? '#' + 'chapter' + chapter : '#' + 'introduction' );

...

当用户单击导航菜单中的链接时，我如何使页面跳转到它假定的位置，如我一直在关注的教程中所见？

4

2 回答 2

3

它们在您的 javascript 中没有问题，但问题出在您的 html 中，请更正 content-wrapper div 它没有包含它喜欢的文章

<div class="content-wrapper"></div><article></article>...

它应该是

<div class="content-wrapper"><article></article>....</div>
于 2012-10-18T07:08:34.770 回答
2

History.getState().url.queryStringToJSON().chapter正在尝试chapter在您的 URL 中查找查询参数，该参数已不存在，因为您更改了 URL 格式。

在没有使用 $.History 的情况下，在我看来，您可以尝试使用以下内容与 URL 进行比较：

if (History.getState().hash.replace(/^\/|\/$/g, '') !== chapter) { ... }
// replace(/^\/|\/$/g, '') will remove a leading and/or trailing slash '/'

但请注意，如果您的站点不在根目录（例如http://example.com/foo/bar/portfolio）上，您仍然需要处理 URL 的其余部分，因为History.getState().hash将返回您/foo/bar/portfolio而不是/portfolio.

（附带说明：如果您发现自己重复写作else if，请尝试使用 aswitch代替。）

于 2012-10-18T07:03:43.473 回答