jQuery scrollTo函数

Question

jQuery scrollTo函数

3

我有一个关于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></>

- Bartosz Cechmann

你使用的是哪个版本的jQuery？我在你的代码中找不到。 - Jhonathan

你是指像这样的吗？https://jsfiddle.net/Lzwt2s2a/1/ - justDan

1

你不应该为每个jQuery函数编写$(document).ready(function(){})。 - Himanshu Upadhyay

@BartoszCechmann 如果你想让它滚动得更快或更慢，你可以改变那个数字。 - justDan

在你的代码示例中，你将函数名称的首字母大小写弄错了。正确的写法是 scrollTo() 而不是 ScrollTo()。 - Josh Burgess

显示剩余6条评论

2个回答

1

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

例如：

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

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

- justDan

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- hallleron · Accepted Answer

这里有一个工作的示例代码，代码更加简洁:

编辑: 你可以通过改变动画持续时间（从2000ms）来改变滚动速度。

$('.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></>