jQuery scrollTo函数

时间：2017-07-21 13:49:36

标签： javascript jquery html css

我遇到了jQuery scrollTo函数的问题，昨天它正在工作：|。无论如何，当我点击导航栏中的按钮时，我想创建平滑滚动到div，它不起作用：S。告诉我为什么，我怎样才能让它发挥作用。

＆＃13;
＆＃13; 
$('.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');
        });
    });
＆＃13; 
.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;
}
＆＃13; 
<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></>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：2)

这是一个有更短代码的工作小提琴：

编辑：您可以通过将动画持续时间从2000毫秒更改为您喜欢的任何内容来更改滚动速度。

$('.wrap').hide();
$('.wrap').fadeIn(700);
  
$(function(){
  $('li').on('click',function(e){
    e.preventDefault();
    $('html, body').animate({
      scrollTop: $($(e.target).attr("href")).offset().top
    }, 2000);
  });
});
.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></>

答案 1 :(得分：1)

您可以在此处使用动画来按页面移动。这是一个快速参考。单击第二个按钮以查看其运行情况。从这里可以更新您的代码以使用此处发布的代码。另外，正如@ Himanshu Upadhyay指出的那样，您可以将所有代码放入1 $(document).ready(function(){})。

E.g。 

$('.button2').on('click',function() {
  $('html, body').animate({
        scrollTop: $("#s2").offset().top
    }, 2000);
});

Jsfiddle：https://jsfiddle.net/Lzwt2s2a/3/

相关问题
最新问题