CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Bartosz Cechmann
Bartosz Cechmann

Reputation: 55

jQuery scrollTo function

I have a problem with jQuery scrollTo function, yesterday it was working :|. Anyway I want to create smooth scroll to div when I click on a button in my navigation bar and it doesn't work :S. Tell me why, how can I make it work.

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

Upvotes: 3

Views: 4941

Answers (2)

hallleron
hallleron

Reputation: 1992

Here is a working fiddle with much shorter code:

EDIT: You can change the scroll speed by changing the animate duration from 2000ms to whatever you like.

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

Upvotes: 2

justDan
justDan

Reputation: 2336

You can use animate here to move about the page how you want to. Here's a quick reference. Click the second button to see it in action. From here can update your code to use the code posted here. Also, as @ Himanshu Upadhyay pointed out you can put all that code into 1 $(document).ready(function(){}).

E.g. 

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

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

Upvotes: 1

Related Questions