jQuery - Animate scroll to section page

Question

I have been working on my personal site, but had a problem with the menu. Web site in progress

Using jQuery I have tried to animate the main menu of the site, it is assumed that when clicking on one of the links, the contents of the main container should be moved to the corresponding section, but this is not happening, it only links correctly when clicking In one of the links for the first time, then everything fails.

I know the problem is with jQuery, but I'm really new to this library and I can not identify the problem.

I would appreciate your help.

$(document).ready(function() {
    $('.scroll-to').on('click', function(event){
      event.preventDefault();
      var sectionID = $(this).attr("data-id");
      scrollToID('#' + sectionID, 750);
    });
});
// scroll function
function scrollToID(id, speed){
    var offSet = 150;
    var targetOffset = $(id).offset().top - offSet;
    $('.main_content, .principal_content').animate({scrollTop:targetOffset}, speed);
}
if (typeof console === "undefined") {
    console = {
        log: function() { }
    };
}





  
  
  
  
  
  
  
  -->
  Jorge Cortés - Front-end Development


  
    
    

    
      
        
          
        
      
      
        About me
        Experience
        Education
        Skills
      
    

    
      
        Hello, I am Jorge
 Web Designer and Front-end
        
        I have two years experience as a web/interface developer.
           I have a taste 
 of clean, elegant styling, and I have lots of experience in the
           production of HTML 
 and CSS code for websites.
        
        

        Personal Info
        
        
          NameJorge Cortés Álvarez
          Date of BirthMay 26, 1993
          e-mailjorgecortesalvarez@outlook.com
          Phone(+57) 300 433 8040
          AddressCartagena de Indias - Colombia
        
      

      
        Work History
        
        Platform Administrator OJS
        Palobra Journal - University of Cartagena 

            2015 - 2016
        Customization of the user's interface, configuration and support
          of the platform Open Journal Systems (OJS) for the virtual publication
          of the Palobra Journal in the University of Cartagena.
        

        Front-end Web Developer
        Freelance/Self-Employed 

            2014 - Today
        Experience in the design and development of web sites using
          techonologies as HMTL5, CSS3, JS and content management systems
          as Joomla and WordPress.
        
      

      
        Academic History
        
        Systems Engineer
        Bachelor's degree - University of Cartagena 

            2016
        
        Secondary Education
        High School degree - Institute Promoción Social 

            2009
      
      
        Development Skills
        
        
          HTML5

          CSS3

          JavaScript

          UX/UI

          Usability Testing

        

      
    
    
      © 2017 Jorge Cortés Álvarez. All Rights Reserved.

ElChiniNet · Accepted Answer

Some styles are missing in your code, I've changed a bit your code and I've also added some styles to make the principal_content div scrollable. Your code works just the first time because the value of the scroll in that moment is 0, you need to add the value of the current scroll value to your calculation, this is the formula:

section offset top - container offset top + scrollTop value of the container

Here is your code working, but here you have a jsfiddle example that is more concise:

$(document).ready(function() {
  
    var cont = $('.main_content .principal_content');
    var contOffset = cont.offset();
  
    // scroll function
    function scrollToID(id, speed){
        var targetOffset = $(id).offset().top - contOffset.top + cont.scrollTop();
        cont.animate({scrollTop: targetOffset}, speed);
    }
  
    $('.scroll-to').on('click', function(event){
        event.preventDefault();
        var sectionID = $(this).attr("data-id");
        scrollToID('#' + sectionID, 750);
    });
});

html, body {
    height: 100%;
}

body {
    margin: 0;
    padding: 0;
}

.menu {
    background: #CCC;
    height: 25px;
    margin: 0;
    padding: 0;
}

.menu li {
    display: inline-block;
}

.main_content {
    height: 100%;
}

.principal_content {
    height: 100%;
    overflow-y: auto;
}




    Jorge Cortés - Front-end Development
    
    
    
    
    
    
          


    

        
            
                About me
                Experience
                Education
                Skills
            
        

        
            
                Hello, I am Jorge
 Web Designer and Front-end
                
                I have two years experience as a web/interface developer.
           I have a taste 
 of clean, elegant styling, and I have lots of experience in the production of HTML 
 and CSS code for websites.
                
                Personal Info
                
                
                    NameJorge Cortés Álvarez
                    Date of BirthMay 26, 1993
                    e-mailjorgecortesalvarez@outlook.com
                    Phone(+57) 300 433 8040
                    AddressCartagena de Indias - Colombia
                
            

            
                Work History
                
                Platform Administrator OJS
                Palobra Journal - University of Cartagena
2015 - 2016
                Customization of the user's interface, configuration and support of the platform Open Journal Systems (OJS) for the virtual publication of the Palobra Journal in the University of Cartagena.
                
                Front-end Web Developer
                Freelance/Self-Employed
2014 - Today
                Experience in the design and development of web sites using techonologies as HMTL5, CSS3, JS and content management systems as Joomla and WordPress.
                
            

            
                Academic History
                
                Systems Engineer
                Bachelor's degree - University of Cartagena
2016
                
                Secondary Education
                High School degree - Institute Promoción Social
2009
            

            
                Development Skills
                
                
                    HTML5

                    CSS3

                    JavaScript

                    UX/UI

                    Usability Testing

                
            

        

        
            © 2017 Jorge Cortés Álvarez. All Rights Reserved.

jQuery - Animate scroll to section page

Answers (2)

Related Questions