scrollTop anchor linking in Bootstrap 3

StackOverflow https://stackoverflow.com/questions/23559647

Question

Morning Guys,

Ok so I am using Bootstrap 3 to build my website - wanting to polish it off using the scrollTop smooth scroll on anchored tags. Cannot get it to work for the life of me.

So here is my code:

<script type="text/javascript" src="js/animate.js"></script>


<body>

<div id='imgDiv'>
    <div class="container">

        <center>
            <a href="#imgDiv2"><h2>my link</h2></a>

        </center>
    </div>  
</div>



<a href=""> 
<div id='imgDiv2'></div>
    some content here  
      </div>
    </div>
  </div>
</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>

This is the script inside animate.js

// JavaScript Document

$(document).ready(function() {
      $('a[href^="#"]').click(function() {
          var target = $(this.hash);
          if (target.length == 0) target = $('a[name="' + this.hash.substr(1) + '"]');
          if (target.length == 0) target = $('html');
          $('html, body').animate({ scrollTop: target.offset().top }, 500);
          return false;
      });
  });

So it does anchor to the div id named imgDiv2 but not using the smooth scrolling animation, any thoughts?

Was it helpful?

Solution

You need to include animate.js after jQuery since your jQuery code inside animate.js require jQuery core library to work:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/animate.js"></script>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top