Javascript 不能使用“；滚动至"；主导航脚本
嗨，我尝试了很多方法来实现这一点，但是我空手而归。我试图在我的非营利网站上添加一个“滚动到”样式的脚本，当我点击一个内部链接时，它会慢慢滚动到链接，而不是跳跃 我知道上面的部分以前已经讲过了。然而，我可能尝试了10种不同的解决方案，但都无济于事。有人知道我做错了什么吗 如果有帮助的话，我可以浏览并列出我尝试过的每一个代码，但是我只想包括我目前正在使用的代码，看看是否有人可以帮助我识别问题 我使用的是HTML5UP中“DopeTrope”模板的一个稍加修改的版本。可在此处找到模板的链接： 我将包括我的html标记的一部分，其中包括有问题的nav元素，以及我一直在使用的jquery脚本，以尝试实现这一点（此外，我的jquery文件更新为最新可用版本：Javascript 不能使用“；滚动至"；主导航脚本,javascript,jquery,html,scroll,Javascript,Jquery,Html,Scroll,嗨，我尝试了很多方法来实现这一点，但是我空手而归。我试图在我的非营利网站上添加一个“滚动到”样式的脚本，当我点击一个内部链接时，它会慢慢滚动到链接，而不是跳跃 我知道上面的部分以前已经讲过了。然而，我可能尝试了10种不同的解决方案，但都无济于事。有人知道我做错了什么吗 如果有帮助的话，我可以浏览并列出我尝试过的每一个代码，但是我只想包括我目前正在使用的代码，看看是否有人可以帮助我识别问题 我使用的是HTML5UP中“DopeTrope”模板的一个稍加修改的版本。可在此处找到模板的链接： 我将包
<!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);
});
}
})();
帮助我在柬埔寨抗击艾滋病毒/艾滋病
-
关于我
洛雷姆·伊普苏姆·多洛尔·阿梅特·费吉亚特（Lorem ipsum dolor sit amet feugiat）
前庭别有用心的权杖自由女神亨德雷特。玛莱苏阿达之家的万岁
hendrerit libero placerat。无设备。在accumsan turpis Comodo的猫科动物非arcu molestie项目中。
元素中的元素，不包含所有元素，也不包含所有元素。
这是一种不含酒精的食物。
前庭别有用心的权杖自由女神亨德雷特。玛莱苏阿达之家的万岁
hendrerit libero placerat。无设备。在accumsan turpis Comodo的猫科动物非arcu molestie项目中。
元素中的元素，不包含所有元素，也不包含所有元素。
一只多洛狮子。两只猫咪在蜗牛和食指前。前庭，
一个基本要素。两个基本要素和一个基本要素。一个基本要素。
Placelat，nunc diam iaculis massa，et aliquet nibh leo non nisl Vita porta lobortis，enim neque fringilla nunc，
这是一个令人震惊的事实，因为它是我们必须面对的
元素，我坐在左舷，我坐在右舷，我坐在右舷，我坐在右舷。
马萨和利奥的非nisl生命之门，埃尼姆·内克·弗林蒂利亚的教堂，
这是一个令人震惊的事实，因为它是我们必须面对的
元素，我坐在左舷，我坐在右舷，我坐在右舷，我坐在右舷，我坐在右舷，我坐在右舷，我坐在右舷，我的右舷，我的右舷，我的右舷，我的右舷，我的右舷，我的右舷，我的右舷，我的右舷