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

...

当用户点击导航菜单中的链接时，如何让网页跳转到它所假设的位置，如 tutorial 中所示以下

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正在尝试在您的网址中找到一个查询参数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），您仍需要处理网址的其余部分，因为History.getState().hash会返回{{1}而不是/foo/bar/portfolio。

（旁注：如果您发现自己反复撰写/portfolio，请尝试使用switch。）

History.pushState URL +滚动到效果

2 个答案: