我有一个关于jQuery scrollTo
函数的问题,昨天它还正常工作。不管怎样,我想在导航栏中单击按钮时创建平滑滚动到div,但它不起作用。请告诉我原因,如何使它起作用。
$('.wrap').hide();
$('.wrap').fadeIn(700);
$(document).ready(function(){
$('.button2').on('click',function(){
$('#s2').ScrollTo();
});
});
$(document).ready(function(){
$('.button3').on('click',function(){
$('#s3').ScrollTo();
});
});
$(document).ready(function(){
$('.button4').on('click',function(){
$('#s4');
});
});
.wrap, footer, #contact {
background-color: ;
}
body {
font-family: Dosis;
box-sizing: border-box;
}
.fluid-container {
max-width: 1000px;
margin: 0 auto;
}
ul {
display: block;
list-style-type: none;
margin: 0;
padding: 0;
background-color: #000000;
position: fixed;
width: 100%;
}
li {
display: inline-block;
font-size: 15px;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #222;
text-decoration: none;
}
#foto1 {
display: block;
width: 100%;
margin: 50px auto;
}
h1{
font-family: Montserrat;
padding: 20px;
font-size: 40px;
text-align: center;
margin-top: 30px;
}
#foto2 {
border: #FBF8BB;
display: block;
max-width: 100%;
margin: 0 auto;
}
#foto3 {
display: block;
margin: 0 auto;
max-width: 100%;
}
.icons {
padding: 30px;
display: block;
}
.portfolio{
text-align: center;
}
#contact {
overflow: hidden;
}
.foto4 {
border-radius:100%;
padding : 20px;
max-width: 100%;
display: block;
margin: auto;
}
footer {
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Dosis" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<div class = "wrap">
<center><ul>
<li><a href="#s1" class="button1">Start</a></li>
<li><a href="#s2" class="button2">O mnie</a></li>
<li><a href="#s3" class="button3">Portfolio</a></li>
<li><a href="#s4" class="button4">Kontakt</a></li>
</ul></center>
<div id="s1" class="fluid-container">
<br>
<img id="foto1" src="https://s6.postimg.org/8vcsstfld/image.png" />
<div style="text-align:center" class="icons">
<a href="https://www.facebook.com/bartek.cechmann" target="_blank">
<img class="icon1" src="https://s6.postimg.org/ap89zgjw1/rsz_1496700658_facebook.png">
</a>
<a href="https://www.linkedin.com/in/bartosz-cechmann-941921124/" target="_blank">
<img class="icon2" src="https://s6.postimg.org/nuns5kdrl/rsz_1496700662_linkedin.png">
</a>
<a href="https://github.com/cechu11" target="_blank">
<img class="icon3" src="http://s6.postimg.org/b0zdn2w1d/1496775488_github_square_social_media.png">
</a>
</div></div>
<div id="s2">
<br>
<br>
<div class="aboutme">
<img id ="foto2" src="https://s6.postimg.org/ch9fdz775/image.png" />
</div></div>
<div id="s3" class="portfolio">
<br>
<h1><u>Portfolio</u></h1>
<img id="foto3"src="https://s6.postimg.org/b15eahcq9/Placeholder.png">
</div></div></section>
<div id="s4">
<footer>
<img class="foto4"src="https://s6.postimg.org/gz6o8ygxd/image.png">
</footer></>
$(document).ready(function(){})
。 - Himanshu UpadhyayscrollTo()
而不是ScrollTo()
。 - Josh Burgess