jQuery scrollTo函數

我有一個問題，jQuery scrollTo函數，昨天它工作：|。無論如何，當我點擊導航欄中的一個按鈕並且不起作用時，我想創建平滑滾動到div。告訴我爲什麼，我該如何讓它工作。jQuery scrollTo函數

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

來源

2017-07-21 Bartosz Cechmann

你使用jQuery的至極的版本？我找不到你的代碼。 – Jhonathan

我使用codepen順便說一句，這是3.2.1實際上jQuery和1.4.6 jQuery scrollTo –

你的意思是這樣的？ https://jsfiddle.net/Lzwt2s2a/1/ –

這裏是一個工作撥弄着更短代碼：

編輯：您可以通過改變從任何你喜歡的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></>

來源

2017-07-21 14:05:01 hallleron

使用'scrollTop：$（$（e.target）.attr（「href」））。offset（）。top'！ +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/

來源

2017-07-21 14:02:43

jQuery scrollTo函數

回答

相關問題