嗨，我已经尝试了很多选择来完成这项工作，但我空手而归。我正在尝试将“滚动到”样式脚本添加到我的非营利网站，当我单击内部链接时，它会慢慢滚动到链接而不是跳转。
我知道上面的部分之前已经介绍过了。但是，我尝试了大约 10 种不同的解决方案，但均无济于事。有谁知道我做错了什么？
如果有帮助，我可以浏览并列出我尝试过的每一个，但我只想包括我当前使用的代码，看看是否有人可以帮助我识别问题。
我正在使用来自 HTML5UP 的“DopeTrope”模板的一个非常轻微修改的版本。可以在此处找到模板的链接：
我将包括我的 html 标记部分，其中包括有问题的 nav 元素以及我一直用来尝试使其工作的 jquery 脚本（此外，我的 jQuery 文件已更新到最新的可用版本：
<!DOCTYPE HTML>
<!--
Dopetrope 2.0 by HTML5 UP
html5up.net | @n33co
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
<head>
<title>Help Me Fight HIV/AIDS In Cambodia</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script src="js/jquery.min.js"></script>
<script src="js/smooth-scroll.js"></script>
<script src="js/jquery.dropotron.js"></script>
<script src="js/config.js"></script>
<script src="js/skel.min.js"></script>
<script src="js/skel-panels.min.js"></script>
<noscript>
<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700,900,300italic" rel="stylesheet" />
<link rel="stylesheet" href="css/skel-noscript.css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/style-desktop.css" />
</noscript>
<!--[if lte IE 8]><script src="js/html5shiv.js"></script><link rel="stylesheet" href="css/ie8.css" /><![endif]-->
</head>
<body class="homepage">
<!-- Header Wrapper -->
<div id="header-wrapper">
<div class="container">
<div class="row">
<div class="12u">
<!-- Header -->
<section id="header">
<!-- Logo -->
<h1><a href="#">Help Me Fight HIV/AIDS in Cambodia</a></h1>
<!-- Nav -->
<nav id="nav">
<ul>
<li class="current_page_item"><a href="index.html">Home</a></li>
<li>
<!--<a href="">Dropdown</a>
<ul>
<li><a href="#">Lorem ipsum dolor</a></li>
<li><a href="#">Magna phasellus</a></li>
<li><a href="#">Etiam dolore nisl</a></li>
<li>
<a href="">Phasellus consequat</a>
<ul>
<li><a href="#">Magna phasellus</a></li>
<li><a href="#">Etiam dolore nisl</a></li>
<li><a href="#">Veroeros feugiat</a></li>
</ul>
</li>
<li><a href="#">Veroeros feugiat</a></li>
</ul>
</li>-->
<li><a class="scroll" href="#about">About Me</a></li>
<li><a class="scroll" href="#mission">My Mission</a></li>
<li><a class="scroll" href="#help">How You Can Help</a></li>
<li><a class="scroll" href="#blog">Blog</a></li>
</ul>
</nav>
</section>
<!-- Main Wrapper -->
<div id="main-wrapper">
<div class="container">
<div class="row">
<div class="12u">
<!-- About Me -->
<section id="about">
<div>
<div class="row">
<div class="12u skel-cell-mainContent">
<!-- Content -->
<article class="box is-post">
<a href="http://facebook.com/DreametryDoodle" class="image image-full"><img src="images/pic01.jpg" alt="" /></a>
<header>
<h2>About Me</h2>
<span class="byline">Lorem ipsum dolor sit amet feugiat</span>
</header>
<p>
Vestibulum scelerisque ultricies libero id hendrerit. Vivamus malesuada quam faucibus ante dignissim auctor
hendrerit libero placerat. Nulla facilisi. Proin aliquam felis non arcu molestie at accumsan turpis commodo.
Proin elementum, nibh non egestas sodales, augue quam aliquet est, id egestas diam justo adipiscing ante.
Pellentesque tempus nulla non urna eleifend ut ultrices nisi faucibus.
Vestibulum scelerisque ultricies libero id hendrerit. Vivamus malesuada quam faucibus ante dignissim auctor
hendrerit libero placerat. Nulla facilisi. Proin aliquam felis non arcu molestie at accumsan turpis commodo.
Proin elementum, nibh non egestas sodales, augue quam aliquet est, id egestas diam justo adipiscing ante.
</p>
<p>
Praesent a dolor leo. Duis in felis in tortor lobortis volutpat et pretium tellus. Vestibulum ac ante nisl,
a elementum odio. Duis semper risus et lectus commodo fringilla. Maecenas sagittis convallis justo vel mattis.
placerat, nunc diam iaculis massa, et aliquet nibh leo non nisl vitae porta lobortis, enim neque fringilla nunc,
eget faucibus lacus sem quis nunc suspendisse nec lectus sit amet augue rutrum vulputate ut ut mi. Aenean
elementum, mi sit amet porttitor lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor.
</p>
<section>
<p>
Nunc diam iaculis massa, et aliquet nibh leo non nisl vitae porta lobortis, enim neque fringilla nunc,
eget faucibus lacus sem quis nunc suspendisse nec lectus sit amet augue rutrum vulputate ut ut mi. Aenean
elementum, mi sit amet porttitor lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor
sit amet nullam consequat feugiat dolore tempus.
</p>
</section>
</article>
</div>
</div>
</div>
</section>
</body>
</html>
/* =============================================================
Smooth Scroll 2.3
Animate scrolling to anchor links, by Chris Ferdinandi.
http://gomakethings.com
Free to use under the MIT License.
http://gomakethings.com/mit/
* ============================================================= */
(function() {
'use strict';
// Feature Test
if ( 'querySelector' in document && 'addEventListener' in window && Array.prototype.forEach ) {
// Function to animate the scroll
var smoothScroll = function (anchor, duration) {
// Calculate how far and how fast to scroll
var startLocation = window.pageYOffset;
var endLocation = anchor.offsetTop;
var distance = endLocation - startLocation;
var increments = distance/(duration/16);
var stopAnimation;
// Scroll the page by an increment, and check if it's time to stop
var animateScroll = function () {
window.scrollBy(0, increments);
stopAnimation();
};
// If scrolling down
if ( increments >= 0 ) {
// Stop animation when you reach the anchor OR the bottom of the page
stopAnimation = function () {
var travelled = window.pageYOffset;
if ( (travelled >= (endLocation - increments)) || ((window.innerHeight + travelled) >= document.body.offsetHeight) ) {
clearInterval(runAnimation);
}
};
}
// If scrolling up
else {
// Stop animation when you reach the anchor OR the top of the page
stopAnimation = function () {
var travelled = window.pageYOffset;
if ( travelled <= (endLocation || 0) ) {
clearInterval(runAnimation);
}
};
}
// Loop the animation function
var runAnimation = setInterval(animateScroll, 16);
};
// Define smooth scroll links
var scrollToggle = document.querySelectorAll('.scroll');
// For each smooth scroll link
[].forEach.call(scrollToggle, function (toggle) {
// When the smooth scroll link is clicked
toggle.addEventListener('click', function(e) {
// Prevent the default link behavior
e.preventDefault();
// Get anchor link and calculate distance from the top
var dataID = toggle.getAttribute('href');
var dataTarget = document.querySelector(dataID);
var dataSpeed = toggle.getAttribute('data-speed');
// If the anchor exists
if (dataTarget) {
// Scroll to the anchor
smoothScroll(dataTarget, dataSpeed || 500);
}
}, false);
});
}
})();