CODEWITHSUNDEEP
javascriptjqueryhtmlweb
Emmanuel Hrist
Emmanuel Hrist

Reputation: 11

Jquery issue when two functions are used

Hey guys I am new to web design and making a site for the family business.

Both of these jquery functions work when the other isn't present in the code but when both are used the first (scroll to) fails to work.

Scroll to location function:

    <script type="text/javascript">
$("#button").click(function() {
        $('html, body').animate({
        scrollTop: $("#home").offset().top
        }, 2000);
});
  </script>

Scroll to new page on user scroll function: 

  <script type="text/javascript">

   $(document).ready(function() {
         $('#fullpage').fullpage({
             sectionsColor: ['#7b797a', '#2039cf','#2039cf' ],
             css3: true      
         });
   });
  </script>

any advice would be appreciated thanks

Upvotes: 1

Views: 52

Answers (1)

Edward Coyle Jr.
Edward Coyle Jr.

Reputation: 435

You should call the first block of code inside of the $(document).ready(); call in the second block. Basically you're setting up an event listener (in this case, a button click) on an element (the button) that may not exist yet because the page is still loading. Setting up the listener inside of $(document).ready(); makes it wait until the page is loaded.

Your code should probably look like this:

<script type="text/javascript">
    $(document).ready(function() {
        $("#button").click(function() {
            $('html, body').animate({
                scrollTop: $("#home").offset().top
            }, 2000);
        });
        $('#fullpage').fullpage({
            sectionsColor: ['#7b797a', '#2039cf','#2039cf' ],
            css3: true      
        });
    });
</script>

Upvotes: 2

Related Questions