Frage

I re-open my previous question as it has been closed due to not beinig specific enough.

I'm trying to make jQuery plugin "ScrollTo" work, but I'm definitively doing something wrong despite using the same method that the doc describes.

Here is how I proceed :

Calling jquery at the end of my <head>

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'></script>
<script type='text/javascript' src='js/jquery.scrollTo-min.js'></script>
<script type='text/javascript' src='js/init.js'></script>

I put the code in my menu link

<li><a title="$(...).scrollTo( 'home' );" href="#home"><span></span>Home</a></li>

which is how they seems to have been doing in the doc : view-source:http://demos.flesler.com/jquery/scrollTo/

However it doesn't work. Am I missing something there?

War es hilfreich?

Lösung

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.

Andere Tipps

I suspect that prepending a hash sign to 'home' may fix the issue:

<li><a title="$(...).scrollTo( '#home' );" href="#home"><span></span>Home</a></li>

It seems that scrollTo expects a jQuery selector (for what it seems you want), so you need the hash sign to make it a valid selector.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top