我试图添加＆＃34;返回顶部＆＃34;按钮到我的网站。当用户滚动到我的网站底部时，它应该显示出来。但它不会消失。它只是赢了。我不知道出了什么问题，我检查了我的代码，一切都应该工作正常，但事实并非如此。回到顶部按钮代码很简单，我的也是如此...我不知道，只看代码。
index.html - 临时我也有我的CSS样式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Clockwork</title>
<link href='http://fonts.googleapis.com/css?family=Righteous|Titillium+Web:400,400italic,700,700italic' rel='stylesheet' type='text/css'>
<link rel="shortcut icon" href="orange.ico">
<!-- Bootstrap -->
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="http://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="http://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<style>
body {
background: url('retro-vintage-pink-city.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100%;
color: white;
font-family: 'Titillium Web', 'Courier New', sans-serif;
}
html {
height: 100%;
}
.home-section {
height: 100%;
}
.about-section {
height: 80%;
padding-top: 24px;
text-align: justify;
background: rgba(16,16,16,0.9);
border-top: 2px solid white;
border-bottom: 2px solid white;
box-shadow: 0 0 20px #000;
}
.media-section {
height: 100%;
padding-top: 150px;
text-align: center;
}
.press-section {
height: 100%;
padding-top: 150px;
text-align: center;
}
.buy-section {
height: 100%;
padding-top: 150px;
text-align: center;
}
.paragraphs {
font-size: 16px;
padding-top: 12px;
padding-bottom: 12px;
padding-left: 16px;
padding-right: 16px;
}
.logo {
margin: 0 auto;
transform: translateY(50%);
}
.btn-md, .btn-md:hover, .btn-md:active, .btn-md:focus {
padding: 12px 24px;
border: none;
border-radius: 0px;
box-shadow: 0 0 28px #000;
color: #fff;
background: linear-gradient(45deg, #005387 0%, #005387 39%, #007387 100%);
font-size: 20px;
font-weight: bold;
}
#return-to-top {
position: fixed;
bottom: 20px;
right: 20px;
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.7);
width: 50px;
height: 50px;
display: block;
text-decoration: none;
-webkit-border-radius: 35px;
-moz-border-radius: 35px;
border-radius: 35px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
#return-to-top i {
color: #fff;
margin: 0;
position: relative;
left: 16px;
top: 13px;
font-size: 19px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
#return-to-top:hover {
background: rgba(0, 0, 0, 0.9);
}
#return-to-top:hover i {
color: #fff;
top: 5px;
}
</style>
</head>
<body id="page-top" data-spy="scroll">
<a href="home" id="return-to-top"><i class="icon-chevron-up"></i></a>
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<section id="home" class="home-section">
<div class="container">
<div class="row">
<div class="col-lg-12">
<img class="img-responsive logo" src="logo.png" />
</div>
</div>
</div>
</section>
<section id="about" class="about-section">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="paragraphs">
<p style="text-align: center; font-size: 42px; font-weight: bold;">About</p>
<p style="text-align: center;"><strong>Lurk into the story and let it fill you up with an indescribable joy of exploring the fantastic and yet sometimes mysterious world of <span style="color: rgb(255, 163, 0)">Clockwork!</span></strong></p>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-3">
<img class="img-responsive" src="anna.png" />
</div>
<div class="col-lg-9">
<div class="row">
<div class="col-lg-12 paragraphs">
<p>Set in a vastly mind-opening era of 60s the game features an <span style="color: rgb(255, 163, 0); font-weight: bold;">ensemble cast</span> of various and colorful characters with each one having his or her own motivations, plans and goals. Join them in their unknowingly, but surprisingly funny venture which would eventually lead to a truly astonishing final in... Well, let's leave that for you to discover! As it will come to the end of the story, all our heroes' paths will cross and therefore they'll together try to save us all from an unexpected, but sadly <span style="color: rgb(255, 163, 0); font-weight: bold;">inevitable doom</span>. This is the event that will be <span style="color: rgb(255, 163, 0); font-weight: bold;">remembered!</span></p>
<p>On their way stands a whole army of many, many, many very smart, as it often occurs, evil-geniuses and also a bunch of ordinary morons who shall do nothing, but only slow our heroes down. Let them not stop our <span style="color: rgb(255, 163, 0); font-weight: bold;">salvation!</span></p>
</div>
</div>
<div class="row">
<div class="col-lg-12 paragraphs text-center" style="transform: translateY(50%);">
<a href="#buy" class="page-scroll btn btn-md">BUY</a>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="media" class="media-section">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>Media</h1>
</div>
</div>
</div>
</section>
<section id="press" class="press-section">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>Press</h1>
</div>
</div>
</div>
</section>
<section id="buy" class="buy-section">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>Buy</h1>
</div>
</div>
</div>
</section>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- Scrolling Nav JavaScript -->
<script src="jquery.easing.min.js"></script>
<script src="scrolling-nav.js"></script>
<script src="js/index.js"></script>
</body>
</html>
index.js：
// ===== Scroll to Top ====
$(document).ready(function(){
$("#return-to-top").hide();
$(window).scroll(function() {
if ($(this).scrollTop() > 50) { // If page is scrolled more than 50px
$('#return-to-top').fadeIn(200); // Fade in the arrow
} else {
$('#return-to-top').fadeOut(200); // Else fade out the arrow
}
});
$('#return-to-top').click(function() { // When arrow is clicked
$('body,html').animate({
scrollTop : 0 // Scroll to top of body
}, 500);
return false;
});
});
这里的jsfiddle： http://jsfiddle.net/kjgeaeqc/