gpt4 book ai didi

javascript - History.pushState URL + 滚动到效果

转载 作者:搜寻专家 更新时间:2023-10-31 08:11:35 24 4
gpt4 key购买 nike

我正在使用 History.pushState 将我的网站 URL 更改为/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 中所示 我一直在关注?

最佳答案

它们在您的 javascript 中没有问题,它是完美的,但问题在您的 html 中,请更正内容包装器 div,它没有包含文章,就像

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

应该是

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

关于javascript - History.pushState URL + 滚动到效果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12947198/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com