In the demo
<a title="$(...).scrollTo( 'home' );" href="#home">
the title
attribute is, indeed, used for its original purpose, and for that purpose only. The purpose is to show a small tooltip on hover. This title is in no way interpreted by the plugin.
The behavior is coded in their js/init.js
file, and it looks like this:
$('#relative-selector').click(function()
$paneTarget.stop().scrollTo( 'li:eq(14)', 800 );
});
...
//the same for every link on the page
The correct usage
is described on the main project page, and the page doesn't mention the title
attribute at all. The purpose of the demo is to show what's possible with the plugin, and it doesn't seem to be designed for source code inspection. The main page URL is:
http://flesler.blogspot.cz/2007/10/jqueryscrollto.html
In your case, add an ID (or a class) to the link so that you can find it from Javascript. Then add a click handler to the link, that will call the plugin. If you pass a string to scrollTo
, it should be a selector instead of an ID (add #
). To scroll the browser window, use scrollTo
as $.scrollTo
, to scroll any other container, use $(container).scrollTo
. Also, you may remove the href
target.
example HTML:
<a href="#" id="click-me">...</a>
example JS:
$("#click-me").click(function(){
$.scrollTo("#home");
});
Remember to wrap in $(document).ready(...)
if you like your scripts in the <head>
. Also note that init.js
is the name of the demo main JS file. If yours is named otherwise, you don't need an init.js
file, and you certainly don't need to copy/paste the one from the demo.