我正在创建一个网站,我需要在其上使用javascript / jquery。我试图在滚动到顶部按钮上使用它,它将无法正常工作。那么我在一个简单的警报(“...”)上尝试了它;它仍然行不通。所以我想知道jquery或某些东西是否没有正确加载。我试过也尝试了警报(“......”);在我的html文件中,发现它在那里工作,但我需要它在我的.js文件中工作。这也许会有所帮助,但在我的.js文件中,我的所有$都用红色加下划线,并且说“找不到名字'$'any”。请嘿嘿! :)
这是主要的html,它没有太多内容,因为它将出现在其他html文件中以创建不同的页面。对不起,如果代码布局不太好,这是我第一次使用堆栈溢出aha。 (我也在Mac上使用Visual Studio Code,如果这与事情有关)
我的HTML:
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Web Tutorials</title>
<link rel="stylesheet" type="text/css" href="TutorialSiteCSSv1.css" />
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="siteJScript.min.js" type="text/javascript"></script>
</head>
<body>
<div id="banner">
<h1>Website Design and Construction Basic Tutorials</h1>
</div>
<div id="menunav">
<ul >
<li><a href="TutorialSitev1.html">Home</a></li>
<li><a href="StructuringPage.html">Structuring</a>
<ul>
<li><a href="StructuringPage.html#divs">Divs</a></li>
<li><a href="StructuringPage.html#paragraphs">Paragraphs</a></li>
</ul>
</li>
<li><a href="#html5">HTML5</a>
<ul>
<li><a href="#whatsHTML5">What's HTML5?</a></li>
</ul>
</li>
<li><a href="#css">CSS</a>
<ul>
<li><a href="#whatsCSS">What's CSS?</a></li>
<li><a href="#cssText">CSS Text</a></li>
<li><a href="#cssMedia">CSS Media</a></li>
<li><a href="#cssPositioning">CSS Positioning</a></li>
</ul>
</li>
</ul>
</div>
<div id="webIntro">
<h2>Home</h2>
<p> content.....
</p>
<p>
content....
</p>
</div>
<a href="#" class="scrollToTop"></a>
</body>
</html>
MY JS文件
$(document).ready(function(){
$(document).ready(function(){
alert("jQuery is working!");
});
});
我也有一个css文件,但不认为这与该问题有关。我本以为会显示警报,但事实并非如此。我真的需要一些帮助,所以如果你可以,我会非常感激,因为我有一个截止日期,谢谢你:)
这是我的新JS:
$(document).ready(function() {
//if window is not at the top then display the button
$(window).scroll(function() {
if($(this).scrollTop()>100) {
$('.scrollToTop').fadeIn();
}
else{
$('.scollToTop').fadeOut();
}
});
//scrolls to top when clicked
$('.scrollToTop').click(function() {
$('html, body').animate({ scrollTop:0}, 800);
return false;
});
});
答案 0 :(得分:0)
我认为您的代码没有任何明显的问题。我试图在http服务器上本地运行您的代码并获得警报。所以我会查看javascript文件路径,并确保在html文件中正确添加了该文件路径。
你可以做的另一件事就是调试问题是打开chrome中的html页面(如果你愿意,可以打开firefox),并试着通过打开开发人员工具来查看控制台是否出现任何错误。
如果脚本有任何问题,可以在控制台上报告。
提示:您可以按F12或(Ctrl + Shift + I)打开控制台。
你确实有两个$ .ready函数互相嵌套但不应该运行你的javascript。
答案 1 :(得分:0)
从我可以看到你的代码看起来是正确的。尝试打开Web调试器工具(chrome中的f12)并查看是否有任何错误。此外,如果您查看网络选项卡并刷新页面以查看所有请求,它将告诉您页面是否已加载。这会告诉您jquery链接是否正常工作或者您的JavaScript路径是否错误。我猜这是其中一个问题,因为这会导致$ jquery库中找不到$(即一个或两个或者你的jquery文件不被包含在内)希望这会有所帮助。