gpt4 book ai didi

html - Firefox 手机上的内部 anchor 位置(在 Android 上)

转载 作者:太空狗 更新时间:2023-10-29 16:06:38 27 4
gpt4 key购买 nike

我有一个包含多个部分的主页 - 每个部分都从主菜单链接到:

<body>
<header>
<!-- nav used on all pages -->
<a href="#nav" class="toggle-nav">
menu <i class="fa fa-bars"></i>
</a>
<nav class="main-nav" id="nav">
<a href="/#item1">Link</a>
<a href="/#item2">Link</a>
</nav>
</header>


<!-- homepage -->
<main>
<section id="item1">some content here </section>
<section id="item2">some other content here </section>
</main>
</body>

(可能)相关的 css:

body {
position: relative;
overflow-x: hidden;
}

@media only screen and (max-width: 750px) {
header .main-nav a {
display: block;
}

.tiggle-nav {
display: none;
}
}

我的想法是,我应该能够在整个站点的菜单中单击“元素 1”,然后到达主页的那个特定部分。

这非常有效,除了在 firefox 移动版上,点击主页内部 anchor 链接从任何其他内部页面将导致主页加载 100距离预期位置 200 像素。

有趣的是,如果我主页初始加载后刷新页面,firefox mobile 可以毫无问题地找到内部 anchor ——也就是说,这只是从内部页面导航到主页时的一个问题.

这里发生了什么?这是否与 firefox 移动版在 找到内部 anchor 之前不加载 CSS 有关?

重要的是,我怎样才能让 firefox mobile 在第一时间找到正确的位置?

非常感谢任何见解。

完整的 css 和 html 位于 http://whoisnicoleharris.com

最佳答案

在 main.js 中,将以下部分的 400 更改为 0:

$('#top').click(function(e) {
e.preventDefault();
$('body,html').animate({scrollTop:0},400);
});

修改后的代码如下所示:

$('#top').click(function(e) {
e.preventDefault();
$('body,html').animate({scrollTop:0},0);
});

这里测试了一下,貌似可以解决问题,具体原因我说不上来。这一定是因为在 anchor 链接上方添加了额外的 400 像素。

关于html - Firefox 手机上的内部 anchor 位置(在 Android 上),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27952827/

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