嗨，我已经尝试了很多选项来完成这项工作，但是空手而归。我正在尝试向我的非盈利网站添加一个“滚动到”样式的脚本，当我点击内部链接时，它会慢慢滚动到链接而不是跳跃。
我知道以上部分已被覆盖过。但是我尝试过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);
});
}
})();