Question

I am using Ariel Flesler’s scrollTo plugin with bootstrap. It looks really simple but I can’t get it to work. I want to click the buttons and it will scroll smoothly to the respective ids. Here’s an example of one button.

Here’s the html:

<a class="btn btn-primary" href="#faqs"></i>FAQS</a>

<div class="id="faqs">



<script src="js/jquery.scrollTo-1.4.3.1-min.js"></script>

Qn. 1 What should the jQuery be so that all my buttons work?

Qn. 2 Incidentally, I stole from twitter bootstrap’s website “application.js” without understanding what they mean but to just hack together to make my website work. Could you explain what these code mean?

//Is this bit of code the convention to add to the start of every jQuery doc?
!function ($) {
$(function(){
var $window = $(window)

//What does this do?
$('[href^=#]').click(function (e) {
  e.preventDefault()
})


//This code scrolls smoothly to top, however it only works when the code below is present. Why?
$("a[href='#top']").click(function() {
  $("html, body").animate({ scrollTop: 0 }, "slow");
  return false;
})


// This is the weird bit of code I don't understand. Without this, my scrollTop doesn't work. Could this bit of code also interfere with scrollTo's plugin? I assume it will...
$('.download-btn .btn').on('click', function () {

  var css = $("#components.download input:checked")
        .map(function () { return this.value })
        .toArray()
    , js = $("#plugins.download input:checked")
        .map(function () { return this.value })
        .toArray()
    , vars = {}
    , img = ['glyphicons-halflings.png', 'glyphicons-halflings-white.png']

Thanks for answering all my questions, appreciate it a lot.

Answer 1

See this:

//Is this bit of code the convention to add to the start of every jQuery doc?
!function ($) {
$(function(){  //<--------------this is where jQuery starts working 'document ready function'
var $window = $(window)

and this:

//What does this do?
$('[href^=#]').click(function (e) {
  e.preventDefault();
});

the above script .preventDefault() is making sure that any <a> tag with attribute of href="#" when clicked page won’t jump up at the top, this is same as return false;

and the below code:

//This code scrolls smoothly to top, however it only works 
//when the code below is present. Why?
$("a[href='#top']").click(function() {
  $("html, body").animate({ scrollTop: 0 }, "slow");
  return false;
});

Yes this will work because it is selecting the <a> tag which has the href='#top' attribute here, when this gets clicked then the html, body will scroll to the top of the document position of 0. However this will work only for this link $("a[href='#top']")

As you didnot mentioned full code but this wont do any harm if you want to scroll to specific div. you can modify the $("a[href='#top']").click(function() { or $('[href^=#]').click(function (e) { code to get all link working.

you can tryout this script:

 $('[href^=#]').click(function (e) {
     e.preventDefault();
     var div = $(this).attr('href');
     $("html, body").animate({
         scrollTop: $(div).position().top
       }, "slow");
 });

checkout in fiddle here: http://jsfiddle.net/Ja6DN/