【发布时间】：2019-01-29 16:51:19
【问题描述】：
我对编码还很陌生，并且希望在我的锚点之间创建一个流畅的动画。我不介意这是使用 JavaScript 还是 JQuery，但是我对这两者都很陌生，所以我可能不明白。
我已经在 JavaScript 和 JQuery 中尝试过这段代码 (https://css-tricks.com/snippets/jquery/smooth-scrolling/)，但由于某种原因都没有工作。 jQuery:
$(document).ready(function()
{// Select all links with hashes
$('a[href*="#"]')
// Remove links that don't actually link to anything
.not('[href="#"]')
.not('[href="#0"]')
.click(function(event) {
// On-page links
if (
location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '')
&&
location.hostname == this.hostname
) {
// Figure out element to scroll to
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
// Does a scroll target exist?
if (target.length) {
// Only prevent default if animation is actually gonna happen
event.preventDefault();
$('html, body').animate({
scrollTop: target.offset().top
}, 1000, function() {
// Callback after animation
// Must change focus!
var $target = $(target);
$target.focus();
if ($target.is(":focus")) { // Checking if the target was focused
return false;
} else {
$target.attr('tabindex','-1'); // Adding tabindex for elements not focusable
$target.focus(); // Set focus again
};
});
}
}
});});
HTML：
<div id="navbar">
<div class="tab1">
<a class="link1" href="#home">
<div class="text1">Home</div>
</a></div>
<div class="tab2">
<a class="link2" href="#work">
<div class="text2">Work</div>
</a></div>
<div class="tab3">
<a class="link3" href="#about">
<div class="text3">About</div>
</a></div>
</div>
<div id="container">
<div id="fullscreen">
<div class="box home" id="home">
<div class="heading">
<h1>Hi,</h1>
<h2>I'm Nathan Wilson</h2>
<h3>a Graphic Designer based in Nottingham, U.K.</h3>
</div>
</div>
<div class="box work" id="work">
</div>
<div class="box about" id="about">
</div>
</div>
</div>
我已经删除了我尝试过的所有 Javascript，并将尝试我收到的任何建议。 谢谢！
【问题讨论】：
-
看看这段代码：codepen.io/anon/pen/GzjBqK
-
@RickSibley 我刚刚尝试过，将“left-side-nav”更改为“navbar”，不幸的是没有运气，我做错了吗？
-
这段代码有效，我已经使用了很多 CSS 技巧代码，所以这让我觉得你在运行脚本之前没有加载 jQuery。这是一支笔：codepen.io/NeilWkz/pen/NoRBwd 在您的页面上确保您正在加载 Jquery（我建议加载 google 版本），然后使用 $(document).ready(function() { // 您的代码在这里加载另一个 js 文件});
-
在我的回答中，我将其更改为导航栏并且它可以工作
-
@NeilWkz 我已将
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script type="text/javascript" src="script.js"></script>添加到我的 HTML 顶部并创建了一个单独的 JS 文件，在原始帖子中对其进行了更新，但仍然无法正常工作。
标签： javascript jquery html scroll smooth-scrolling