gpt4 book ai didi

javascript - 现有 JavaScript 可以平滑滚动到 id,希望帮助为特定 id 添加异常(exception)

转载 作者:行者123 更新时间:2023-12-01 05:29:37 24 4
gpt4 key购买 nike

这里的 JavaScript 将平滑滚动到所有哈希链接。我需要 id=nav 及其生成的哈希链接 /#nav 被下面的 JavaScript 忽略。 id=nav 用于菜单响应,当它被下面的 JavaScript 占用时,它会破坏菜单。

有人可以告诉我如何忽略下面 JavaScript 中的特定 id 吗?

我还制作了一个有效的 HTML 演示,您可以在下面看到。

.top {
position: fixed;
top: 0;
}
a {
margin-left: 20px;
display: block;
}
#nav {
height: 800px;
background-color: #777;
display: block;
}
#test1 {
height: 800px;
background-color: #ccc;
display: block;
}
#test2 {
height: 800px;
background-color: #111;
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script>
$(function() {
$('a[href*="#"]:not([href="#"])').click(function() {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html, body').animate({
scrollTop: target.offset().top - 80
}, 500);
return false;
}
}
});
});
</script>

<body>
<div class="top">
<a href="#nav">nav</a>

<a href="#test1">1</a>

<a href="#test2">2</a>
</div>

<div id="nav"></div>

<div id="test1"></div>

<div id="test2"></div>
</body>

最佳答案

在 JavaScript 的第二行之后添加此行:

if($(this).attr("href") == "#nav") return;

所以它看起来像这样:

$(function() {
$('a[href*="#"]:not([href="#"])').click(function() {
if($(this).attr("href") == "#nav") return;
//... Rest of code

JSFiddle

其工作原理是检查所单击链接的 href 属性值不是 "#nav"。如果是,该函数将返回 false 并且不会执行。

关于javascript - 现有 JavaScript 可以平滑滚动到 id,希望帮助为特定 id 添加异常(exception),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38310063/

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