4

I'm changing my sites URLs to /name using History.pushState, which is working but the page does not scroll to the location of the site it is suppose to.

index.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' );

...

When the user clicks on a link in the navigation menu, how do I make the page jump to the location it is suppose to, as seen in the tutorial I've been following?

4

2 に答える 2

3

それらはあなたのjavascriptには問題ありませんが、問題はあなたのhtmlにありました。コンテンツラッパーの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が URL 内のクエリ パラメータを検索しようとしてchapterいますが、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 ifa を使用してみてください。)switch

于 2012-10-18T07:03:43.473 に答える