Question

<head>
<link rel = "stylesheet" type = "text/css" href = "tof_css.css" />
<script src ="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Lato|Kanit|Heebo|Source+Sans+Pro:200">

<script src="finaljs.js"></script>
</head>

<body>
<div id = "container">

<header>
  <div id = "static_nav">
    <nav class = "navbar">
      <a href = "#block_one">HOME</a>
      <a href = "#block_two">ABOUT</a>
      <a href = "#block_four">PEOPLE</a>
      <a href = "#block_five">CONTACT</a>
      <a href = "">LOG IN</a>
    </nav>
   </div>
</header>

<div id = "block_one">
</div>

<div id = "block_two">
test
</div>

<div id = "block_three">
test
</div>

<div id = "block_four">
test
</div>

<div id = "block_five">
test
</div>

</div>
</body>

这是Jquery：

根本不滚动。我尝试引用“nav”，但这也不起作用。我不确定我的逻辑是否正确，或者我是否完全遗漏了某些东西。

$("navbar").find("a").click(function(e) {
e.preventDefault();
var section = $(this).attr("href");
$("html, body").animate({
    scrollTop: $(section).offset().top
});
});

提前感谢您的帮助。

Answer 1

你几乎就在那里，但在你的代码中

$("navbar") // is nothing

你需要写

$("nav.navbar")

或

$(".navbar")

请参阅此处的工作代码：

＆＃13;

$("nav.navbar").find("a").click(function(e) {
e.preventDefault();
var section = $(this).attr("href");
$("html, body").animate({
    scrollTop: $(section).offset().top
});
});

＆＃13;

div {
  height: 500px;
  background-color: orange;
  margin: 20px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id = "container">

<header>
  <div id = "static_nav">
    <nav class = "navbar">
      <a href = "#block_one">HOME</a>
      <a href = "#block_two">ABOUT</a>
      <a href = "#block_four">PEOPLE</a>
      <a href = "#block_five">CONTACT</a>
      <a href = "">LOG IN</a>
    </nav>
   </div>
</header>

<div id = "block_one">
</div>

<div id = "block_two">
test
</div>

<div id = "block_three">
test
</div>

<div id = "block_four">
test
</div>

<div id = "block_five">
test
</div>

＆＃13;

Answer 2

$("navbar")指的是名为navbar的标记，您需要使用类navbar来定位元素，因此使用$(".navbar")来定位元素

我正在尝试编写一个平滑滚动导航链接的脚本，但它只是直接跳转到锚点

2 个答案: