CODEWITHSUNDEEP
jqueryjquery-pluginsscrollto
haky_nash
haky_nash

Reputation: 1090

Using the ScrollTo plugin to scroll to the element clicked on

I want to use the ScrollTo plugin to scroll to the element that has been clicked on. So that the element that has been clicked on ends up at the top of the page. I have the following code:

scripts.js

$(document).ready(function(){
    $("#post").hover(
        function(){
            $("#sbox").toggle("slow");
        },
        function(){
            $("#sbox").toggle("slow");
        });
        $(".jumbotron").click(function(){
            jQuery(this).ScrollTo();
        });

});

This throws the error:

[Error] TypeError: 'undefined' is not a function (evaluating 'jQuery(this).ScrollTo()')
    (anonymous function) (scripts.js, line 10)
    dispatch (jquery-1.11.1.js, line 4641)
    handle (jquery-1.11.1.js, line 4309)

How do I do this?

Upvotes: 0

Views: 1778

Answers (2)

Ariel Flesler
Ariel Flesler

Reputation: 622

the plugin is called scrollTo with lowercase "s".

Try this

$(document).ready(function(){
    $("#post").hover(
        function(){
            $("#sbox").toggle("slow");
        },
        function(){
            $("#sbox").toggle("slow");
        });
        $(".jumbotron").click(function(){
            $.scrollTo(this);
        });
});

It'd be safer to change those toggle() for either show() or hide() depending on the case.

Upvotes: 0

G.Mendes
G.Mendes

Reputation: 1201

That happens because you are trying to scroll the element itself while you want to scroll the window towards the element (or the iframe if inside an iframe).

The documentation specifies, in the case of scrolling whole window, we can use it's scroll as follows:

$.scrollTo(position, transitionSpeed,{...});

Leaving for us just a bit of changes for final result:

$(".jumbotron").click(function(){
   $.scrollTo($(this).position().top, 500); //gets top position of element
});

Tend for what is the need of positioning, this is an example

I've set up a fiddle >> http://jsfiddle.net/3M5fE/ with the working example, blue divs are the ones with scroll.

Upvotes: 1

Related Questions