Fatal编程技术网
  • javascript/
  • 为什么赢了'；Jquery/javascript在我的网站上工作？

为什么赢了'；Jquery/javascript在我的网站上工作？

javascript jquery html css

为什么赢了'；Jquery/javascript在我的网站上工作？,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我正在创建一个网站，我需要在上面使用javascript/jquery。我试图在滚动到顶部按钮上使用它，但它不起作用。然后我在一个简单的警报（“…”）上尝试了它；但它仍然不起作用。所以我想知道jquery或其他东西是否加载不正确。我也试着把警报（“…”）；在我的html文件中，我发现它在那里工作，但我需要它在我的.js文件中工作。这也可能有帮助，但在我的.js文件中，我所有的$都有红色下划线，上面写着“找不到名称“$”any”。请帮帮忙！：） <head> <meta

我正在创建一个网站，我需要在上面使用javascript/jquery。我试图在滚动到顶部按钮上使用它，但它不起作用。然后我在一个简单的警报（“…”）上尝试了它；但它仍然不起作用。所以我想知道jquery或其他东西是否加载不正确。我也试着把警报（“…”）；在我的html文件中，我发现它在那里工作，但我需要它在我的.js文件中工作。这也可能有帮助，但在我的.js文件中，我所有的$都有红色下划线，上面写着“找不到名称“$”any”。请帮帮忙！：）

<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>
这是主html，它没有太多的内容，将出现在其他html文件中，以创建不同的页面。抱歉，如果代码布局不太好，这是我第一次使用堆栈溢出aha。（我还在mac电脑上使用Visual Studio代码，如果与此相关的话）

<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>
我的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>
我也有一个css文件，但我认为这与问题无关。我本以为会显示警报，但事实并非如此。我真的需要一些帮助，所以如果你能，我会非常感激，因为我有一个最后期限，谢谢：）

<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>
这是我的新JS：

<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>

$(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;
    });
});
我看不出你的代码有任何明显的问题。我试图在http服务器上本地运行您的代码，但收到了警报。因此，我将查看javascript文件路径，并确保在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>
另一个可以调试问题的方法是在chrome（或者firefox，如果您愿意的话）中打开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>
如果脚本有任何问题，可以在控制台上报告

<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>
提示：按F12或（Ctrl+Shift+I）可以打开控制台

<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>
您确实有两个$ready函数嵌套在一起，但它们不应该运行javascript。

从我看来，您的代码看起来是正确的。尝试打开web调试器工具（chrome中的f12）并查看是否有任何错误。另外，如果您查看网络选项卡并刷新页面以查看所有请求，它将告诉您页面是否已加载。这将告诉您jquery链接是否工作不正常，或者您的JavaScript路径是否错误。我猜这是其中一个问题，因为这会导致无法从jquery库中找到$（即一个或两个，或者jquery is文件未包含在内），希望这能有所帮助。

那么，jquery加载是否正确？是否已检查浏览器以查看文件是否正确下载？脚本文件的路径是否正确？如果正在加载或删除浏览器开发工具，则易于在浏览器开发工具中进行检查not@JonathanM这没有任何意义。我在想可能是因为缺少一个库或者其他什么原因，但是我不知道该找什么或者如何检查。听起来好像你把文件放在了一个不同的目录下而不是页面上。路径是相对于该页的 
<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>