Scrollto returning error

Question

I'm using bootstrap to create a collapsible element in my site. I currently have a button that toggles the collapsible element but the collapsable element is lower on the page so if you just click the button you might not notice that anything has changed, depending on how big the browser window is. This makes for bad user experience so I want to make the window scroll down to center on the newly shown element. My script looks like this:

$("#about-collapse").on("show.bs.collapse", function () {

  var selected = $(this);
  var collapseh = $(".collapse .in").height();

  $.scrollTo(selected, 500, {
    offset: -(collapseh)
  });
});

My browser returns the error each time I click to show the element:

Uncaught TypeError: Object function ( selector, context ) {
    // The jQuery object is actually just the init constructor 'enhanced'
    return new jQuery.fn.init( selector, context, rootjQuery );
} has no method 'scrollTo' 

What's going on here?

Answer 1

You have a conflict with JQuery and another script that's being loaded on the page. You need to do one of two things:

1. Remove the additional scripts one by one until you find the offending one

2. Change jQuery from using the dollar sign to a non-conflicting variable:

http://api.jquery.com/jquery.noconflict/

<script>
    //Tell it something else is using the dollar sign
    $.noConflict();

    //Now instead of using the dollar sign, you use "jQuery"
    jQuery( document ).ready(function( $ ) {
        // Code that uses jQuery's $ can follow here.
    });

Answer 2

If you really wanted to use toScroll (smooth scrolling)

i'd just recommend using: http://demos.flesler.com/jquery/scrollTo/ its really easy to use, more so than bootstrap