History.pushState URL +滾動到效果

Question

我正在使用History.pushState將我的網站網址更改為/ name，這是有效的，但頁面不會滾動到它所假設的網站的位置。

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

... 

當用戶單擊導航菜單中的鏈接時，如何使頁面跳轉到它所假設的位置，如我一直關注的教程中所示 ？

Answer 1

他們的javascript是完全沒有問題，但問題是在你的HTML請糾正內容包裝div它沒有包含文章它是什么樣的

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

它應該是

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

Answer 2

History.getState().url.queryStringToJSON().chapter試圖在您的URL中查找查詢參數chapter ，因為您更改了URL格式后該chapter不再存在。

在沒有使用$ .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 ，請嘗試使用一個switch來代替。）