A new major update of jQuery.LocalScroll has seen the light.
Two minor releases were added after it and is now at 1.2.2. I'll detail them all together:
Optimizations
- Replaced a $('[name='+name+']') for a document.getElementsByName(name) to critically improve perfomance.
- Small improvements to make the code shorter.
Fixes
- The last argument received by onBefore when scrolling the window, is no more $(window) but the real element being scrolled.
Changes
- Renamed the option 'persistent' to 'lazy', the latter seemed more adequate. Using 'persistent' will still work (backwards compatibilty)
Features
- Added the option 'stop', if true (default), each event will stop any previous animations of the target.
- Added the option 'lock', if true, the plugin will ignore events if already animating.
- Added $.localScroll.hash( settings ); which will scroll to the given element if the URL contains a valid hash.
- Removed the option 'cancel' that wasn't working well, and added the option 'hash'. It does what 'cancel' was meant to do, but in a different way.
After a scroll, the hash( #some_id ) of the link is added to the URL.
Note:This setting is not compatible with options like offset and margin, as the browser will natively scroll in the end.
If you use the option 'target'(to scroll an overflowed element) and the window has overflow, setting the hash will scroll the window as well. So my advice is:
only use 'hash' when scrolling the window.
jQuery.LocalScroll 1.2.x requires jQuery.ScrollTo 1.3.1 or higher.
Links
- Main post
- Github Repo
- Regular Demo
- AJAX Demo
- jQuery.ScrollTo
- jQuery.ScrollTo's demo (must see)
- Changelog
Downloads
- jQuery.LocalScroll 1.2.7 Source(to learn or test)
- jQuery.LocalScroll 1.2.7 Minified(recommended)
- jQuery.ScrollTo 1.4.3.1 Source(to learn or test)
- jQuery.ScrollTo 1.4.3.1 Minified(recommended)
175 comments:
hey flesler
sorry to bother u again
i tested my site in the school mac labs and they were using safari 2 and it didnt work but your demos worked in safari 2. In Safari 2, the scrolls dont work but if you scroll down manually and click on a link, it scrolls to the top.
weird. if u can figure out i'd really appreciate it. if u can't, its cool too, you've helped a bunch already.
thanks so much, appreciate it.
Hi Nelson
Check jQuery's compatibility table here. You have a test suite in there, that you could try.
Cheers
** Posting this here too in case you're not checking the first post. Sorry for the duplicate...
Thanks for the plugin. I have a question/issue though. Is it possible to NOT have the entire window scroll when you're trying to only have one section of a page scroll. I'm using the #hash method, and in addition to scrolling the small area for my content, the PAGE will scroll to that hash as well, which is an unwanted result. Let me know if I'm not explaining it well enough.
Thanks again!
Hi Ryan
LocalScroll only scrolls the element/s you choose with the setting 'target'.
I tested both demos on IE6, FF2, Safari 3 and Opera 9.2x.
I noticed that Opera scrolled the whole window when setting the hash, that was unwanted, but there wasn't much I could do, and it was only on a specific situation, on a not-that-popular browser.
Are you seeing it on Opera ?
What browsers/versions/OS are you testing on ?
Have you checked the regular demo to see if that happens too ?
Are you sure you don't have a JS error ?
If you can't solve it, an online demo would help.
Note that the hash option is tricky, and voids a few things like 'offset' or 'margin'.
Cheers
thanks for the quick reply. the problem happens in both ff and ie, and your demo does the same thing. the reason you don't notice it on your demo is because the content is shorter than the browser window. if you can, try your demo at 800x600. you will notice it then. sorry for no punctuation, i'm on my cellphone typing this.
thanks!
Hi Ryan
You are completely right, I was actually wondering why wasn't that happening when I made the demo(window scroll), but seems like I liked the results so I just ignored the issue :)
I don't think there's a simple workaround. For now I'll add a warning. I'll try to find a way to avoid this.
Thanks for finding out.
Cheers
Hi Flesler,
I'm trying to use LocalScroll and can't seem to get it to work. This is my first use of jQuery, but I have experience with javascript. Could you take a look at my sample page and let me know what I'm doing wrong? I'd like to scroll the entire page to the local targets. I must be missing something simple...
http://www.eebeads.com/advscripts/TestScroll.htm
Thank you!
Allen
Hi Allen
I think I found the problem. Try what I explained HERE and see if that solves it.
Cheers
Hey Ariel,
I'm having a bit of trouble getting your plugin to work in safari. It works fine in FF and IE. Was wondering if you could shed some light on it for me. My URL is
http://www.a-sides.net/new_site/
Thanks,
Patrick
Hi Patrick
Where should it be working ?
Any nav link on the right side (listen, tour, watch, buy, etc..), in FF and IE, scrolls to an element on the left beautifully.. but in Safari 3, nothing happens when you click the link.
not sure why this is... but if i scroll down the page manually in safari, then press a link on the right, it will localscroll back to the top of the page for some reason.. no matter what the anchor of the link is set to??
Hi Patrick
It seems like jQuery.offset() is returning (0,0) on any of them.
It could be a bug of offset or probably a quirk of Safari, misreporting the offset.
All I can suggest is to try to change the navigation, you can do something like I did in the demo.
Make a 3 columns layout, and make the links in the right column, scroll the center column.
This is probably not what you want, you can try and report at jQuery and hope to get soemone in the core to check if offset() is failing.
Cheers
Thanks for your efforts.. I will let you know what I come across.
-Patrick
Unfortunately, this plugin doesn't seem to work with an imagemap. I have other links working, but clicking on an imagemap just makes the page jump like a regular anchor.
Is there a solution to this? Maybe something that will attach the scrolling business to imagemaps as well?
Thanks!
Hi Joe
Can't check now, but I'll investigate a bit soon. This might be easily fixable.
Cheers, I'll post here.
Hi Joe
I gave a quick glance, and it seems imagemaps are ignored, only links.
If you use the option 'lazy'(as true) it might/should work though.
Do you think I can get a link to your page ? (by email if you want)
I'll try to add maps to a new release ASAP.
Cheers
Hey Ariel,
I added 'lazy:true,' to the settings and it works!
I figured it might be something simple, but thats almost too easy :).
And here is my url: www.joeshoop.com
Re: Safari Troubles
I just found out that linking to anchors in children of absolutely positioned elements does not work in Safari 3 on OS X.
Everything is hunky dory when using relative positioning.
Thanks for the plugins & I hope this helps someone.
Hi wo
Thanks for sharing, I'll try to check that during the week.
It's probably an issue of jQuery.offset() that is used.
Thanks
Hi Ariel,
I have a question with the AJAX Local Scroll Demo.
How are you loading in your content? I checked the source of the Ajax local scroll demo, but i can't seem to figure it out.
Hi Tommy
I'm using the function .load() of jQuery. Inside a click binding to the links.
Note that the demo is not really to show you how to load content by Ajax. It can be used for Ajax or any other way of adding dynamic content.
Hi - Fantastic script - thanks,.. though I am having one slight problem.
How can I get the script to work with both mouseover AND click events? right now the over event triggers the scrolling, but if you click, the page jumps to the anchor AND scrolls...
also is there an option for an autostart?
You can set 'event' to 'mouseover click'.
Or
$('body').click(function(e){
if( e.hash )
e.preventDefault();
});
This second approach will also void outgoing links that also have a hash (not that common). You can improve that 'if' if necessary.
About the autostart, you can use $.localScroll.hash() to scroll to the element pointed on the address bar's hash.
thank you for this massively useful plugin.
I just wanted to say to those users having trouble with Safari - I spent much time pulling my hair out over this, turns out, at least for me, my test page works perfectly online but not locally (anchors work but no scroll). Have no clue as to why this should be but hope this is helpful to some.
Hi Ariel!
I really appreciate your plugin. Worked well for me so far. Yesterday i tried to use it with a select menu (dropdown list). I wonder if this is possible.
I simply tried it with the usual code:
onChange="location.href=this.options[this.selectedIndex].value;"
and an option tag just like: option value="#one"
Of course it worked, but without animation, only the standard anchor jump.
Is such a thing even possible? I would really appreciate if you could enlighten me.
Thanks and greetings from cold Austria,
Tobi
Hi Toby
I assume you are also calling this plugin as well (not just that onChange).
The plugin doesn't work on selects, that's not a common behavior and it's truly odd to set the value of the options like that.
It shouldn't be to complicated but no, LocalScroll won't do for you.
Hi Ariel!
Sorry, I'm new to jquery.
Can you please tell me what's the syntax for an anchor to scroll to an absolute pixel position. And where do I write it in my html-file? I don't know where to implement my code...some in the head tag, but where do I write the absolute position etc...
So far I've:
-script type="text/javascript"-
jQuery(function( $ ){
$.localScroll();
});
-/script-
in my -head- tag and I do the scrolling with a simple link: -a href="#anchor1"- which scrolls to a div with id="anchor1"
Is it possible to give this div an absolute pixel position. Simple: "Please scroll the div with the id="anchor1" to the position 0x,200y (from top left).
However, the scrollbar should scroll too...the window.
Thank you for helping all the people here and I hpe you understand my question, I'm not a native english speaker.
Hi (name?)
To scroll based on anchor/link you simply call this plugin and set up the html like you said.
You include jQuery, then ScrollTo, then LocalScroll and finally the call to $.localScroll().
If you want to scroll (the window or anything else) to a definite position, then you simply use $.scrollTo.
For example:
jQuery(function($){
$.scrollTo( 200, 1000 );
});
Thank you Ariel!
It now works :)
Hi Ariel,
Great Plugin! I just wanted to give everyone a heads up when auto generating links for pagination.
Since the filter for the localscroll validates against the current URI, all your links must be exactly the same or the scrolling wont work.
I updated
this.href.replace(this.hash,'') == URI
to
this.href.replace(this.hash,'').toLowerCase() == URI.toLowerCase()
That's right John. I actually thought about this for a while and decide it to keep it case sensitive.
Some urls don't work with the wrong case.
You shouldn't get into this problem if you simple set the hash as href.
Example:
foo
The browser prepends the url - the hash
Brilliant plugin, just a quick question when the page loads how do I call the localScroll to move to a certain point automatically??
You can't tell it "scroll to X element".
You should simply use ScrollTo for that:
$.scrollTo( '#your_element', ... );
If this element is indeed the one pointed from the url in the address bar (#some_elem) then you need to call $.localScroll.hash().
This is done on the demo.
Thanks for that, I'm using...
$('#content').scrollTo({ top:630, left:700}, 800);
$.localScroll.hash();
However it only moves down the x-axis isnt firing, all works fine when clicking, just not on the auto scroll.
$('#content').scrollTo({
top:630, left:700
}, 800, {axis:'xy'});
$.localScroll.hash({
target:'#content',
duration:800
});
You should read ScrollTo's docs for stuff like this.
Many Thanks, sorry if my questions annoy you, I am new to JQuery. Great Plugin
Hi,
I really really like what jquery and your plugin can do. I'm unfortunately no programmer, but I'm making this site for some friends of mine: http://www.qualitytime.no/index_new.php - When you click the link "fotos" it should scroll to an anchor i've made that is called "fotosanchor" - but i can't make it work. Is there something essential i'm missing here?
Hi
2 problems:
- You're including ScrollTo twice instead of once ScrollTo and once LocalScroll.
- You wrote LocalScrolTo instead of LocalScroll.
Check the docs.
Blimey, what a great tool. I'm totally out of my depth here (no js exp), but I've managed to implement what i persume to be Local Scroll into my one and only website (this took an age and i nearly gave up), it works just as imagined in FF3 and Netscape, however in IE it scrolls vertically instead of horizontally and in Opera it seems to move down the page one line on every scroll.
Would you kindly check out the link:
www.eden-flowers.co.uk/eden.html
I know you must get the same questions over and over again and you've probably posted a solution to the problem somewhere but i was unable to find anything, so would greatly appreciate a novices answer (ie spell it out for me!!!!)
Thanks Ariel in advance
Hey Ariel, thanks for this great family of plugins.
Quick (hopefully) question: Is there a way to reinitialize localScroll to include dynamically added/changed links?
Here's my demo.
This works fine in Firefox/Safari but doesn't scroll in IE 6 or 7. This is probably because I'm changing the href of the links in #nav from /pagename to #pagename. If I change the href of the links to #pagename in the html it works fine.
Cheers!
Check the docs for the setting called 'lazy' and the Ajax demo for an example.
Thanks for the speedy response. Lazy is set to true in my example. It seems that any time I change attr("href"), localScroll doesn't work in IE. I'll try appending a new link to the #nav to see if that one works.
Thanks again!
Yes. The prepended link works fine. I guess the solution would be to replace all the links in #nav rather than just changing the href values.
Hi, I posted a couple of weeks ago, plugin now live on honda's new website...
http://www.weloveschoolrunmums.co.uk/
So many thanks for that, however I'm using your plugin on another site and I'm trying to capture the target anchor after it has animated...
$('#nav').localScroll({
target: '.content',
hash: false,
duration: 900,
onAfter: function(e) {
$(this).find('dl').css('border', '2px solid black' );
}
});
The CSS border is applying to all the divs with it rather than the anchor it is travelling to.
What variable name are you holding the target/ so I can use it to custom the target, many thanks.
You need to use the 1st and only arguments (e in your case).
Check the docs on scrollTo.
Flesler, your help would be much appreciated.
I'm using Local Scroll. Everything's working great (great plugin!) except one thing.
The user is going to enter an email address, and depending on the email address they enter, I need to scroll to a separate div. For example, if they enter an email address from AOL, they would go to step4a, but if they enter a gmail address, they would go to step 4b. How can I make this work? When I try manipulating the href attribute through javascript, the scrolling stops working.
Any help would be much appreciated.
Thanks!
Hi Rick
LocalScroll is used for a certain situation. The one you describe doesn't seem to match.
You simply need to use ScrollTo by itself, w/o LocalScroll "wrapping" it.
If you need to scroll to an element, you simply do $('#foo').scrollTo('#bar',800);
You have the docs for scrollTo on this blog.
Hey Ariel,
Just wanted to follow up my previous comments with a big thanks. We just launched http://www.cyberwoven.com/ on Friday and it wouldn't have been possible without scrollTo, localScroll, & serialScroll. Cheers!
Thanks for sharing. Will add it to the blog.
Do I need to include both the scrollTo and the localScroll Code in my document? Or do I need to link the plugin in my header? (Not sure if it makes a difference, but up to now the plugin hasn't had an effect, so I figured I might be doing something wrong.)
I am trying to scroll a set of images horizontally. (The body scrolls, but parts of the page use position:fixed.)
You need to include jQuery, then ScrollTo and LocalScroll (in the header or wherever).
After them, you add a script where you initialize the plugin (LocalScroll).
It will probably look similar to the init.js of my demos, but doesn't need to be exactly like that.
You might not be specifying the 'target' correctly. Check the docs.
how can i use over & hash together?? can't make it work
$.localScroll({
over:'-12.5',
hash:true});
Hi Ariel,
First of all: Splendid plugins! I love that AJAX DEMO, but can't figure out how to tell the plugin to use the doc on the server to scroll. Can you help me on that. Please, take me by the hand, as I'm just a designer and don't know much about coding.
Thank you for your time and willingness!
Felix.
@Ion
Check the docs. The option is hash is incompatible with some other options.
@felix
What do you mean by "tell the plugin to use the doc on the server to scroll" ?
Hi Ariël,
I like to have a scroll exactly like that AJAX DEMO. When I saw the source code, I couldn't find any text, so I presume it is loaded dynamically from an external document on the server. Maybe you can give an example as I don't know much of Javascript. Thanks for your help!
Felix.
var url = 'html/' + this.hash.slice(1) + '.html';
This part generates the url.
this.hash.slice(1)
This is the last part of the clicked link's url (#something) without the #.
Now you should know how to tune the urls to suit your needs.
Hi Ariël,
Should I put those strings into the init.js within the $(document).ready(function()?
Felix
Yes Felix, replace the original line with what you need.
Hi Ariel,
I love your work. I am new to javascript (but not to programming), I have a weird problem with the jquery.localscroll plugin, maybe you can help me.
This page http://thegraphicdesignschool.com/pages/pre.1.0.html does the desired effect in ALL the browsers I know (Firefox PC/Mac, IE, Camino, Safari PC) but NOT on Safari Mac. I hit my head against the wall!
Would you have a clue? Or at least could you indicate me how to debug this?
Many thanks in advance.
JM
Hi Ariel,
A little precision to my question, the effect does work on Safari Mac version 3.1.2, and NOT on Safari Mac 3.2!
I also checked other sites that use the same effect with pretty much the same code (like this one http://www.cahababeachofficepark.com/home/) and it works on theirs... That lives me more puzzled.
Many thanks, again.
Hi
I think the problem is that you're not using scrollTo's last release (1.4). It adds massive fixes for cross browsers, scrolling, issues/differences (+iframes).
Try updating it, hopefully that will do.
Hi Ariel,
Unfortunately, I am using the latest jquery.* files.
Cheers, JM.
No, scrollTo has 1.4
Hi Ariël,
Wasn't able to answer your reply, very busy week.
Thanks you for your kind explanation. Though sometimes very short (!), your answers are helpfull and you're always answering. It makes your great plugins more understandable and its usage more divers!
Felix.
I'm having some trouble using the filter command in localscroll's settings. Right now I'm using this:
filter: '.mover a',
hoping to filter all links with the class "mover"
Sadly this is not working...
If you could give any more guidance on how to use filter, I would be much obliged. Thanks!
Hi
That'd be 'a.mover', '.mover' will do too.
http://docs.jquery.com/Selectors
For reasons that are beyond me, when I used "a.mover" my forward navigation on my scroller breaks, but my backward navigation does not.
I am also not achieving the desired effect.
I'm using the coda-slider plugin from jqueryfordesigners, which bundles your localscroll plugin. Because I am also using the farbtastic color picker on one of my "tabs" and because that plugin does not play nice if there are any other tabs before it, I've assigned a hover function to the color picker which causes all the previous tabs to be set to "display:none".
This works a treat, except that after hiding all the previous tabs I need to move back to the tab that has the color picker on it.
This too, works a treat. The only problem is that it "slides" back to the color picker tab, instead of jumping to it.
In short, it would be better if there was no slide effect for this link, and the page appeared as though it never left.
LocalScroll (as well as SerialScroll) are wrappers for the ScrollTo plugin.
The latter is real scrolling plugin. If you need an instant scroll to 0, or something like that... just use ScrollTo itself, something like:
$('#foo').scrollTo( 0, {axis:'x'});
I am wondering if it would be possible to post sample code on how to display Dynamic content, in other words, the scrolled content is loaded from a local URL. I am not sure how to do this, everywhere I look the scrolled content is contained within the same page. I would like to be able to scroll in content from a different page.
Many thanks, marco
I'm not sure what you mean, there's an Ajax demo...
If you use $.localScroll (instead of $().localScroll()) together with the option 'lazy', then the links can be replaced.
If the 'target' option is a selector, then the target element can be replaced too.
Oh, sorry it was not clear. Here's what I mean: say index.html is the page that will display the scrolling items. as in your AJAX example page.
The question is how do I load content from different pages e.g. content1.html, content2.html, etc., instead of having the scrolled content within the index.html page itself. Is this possible? If it is, it must be so simple that I fail to see it.
How to load content ? that you do with core jquery functions like load, get, post, ajax.
The Ajax demo DOES use Ajax (doh). It loads the content dynamically.
Yes, ok, the demo does load Ajax content from other pages... but how does it do it? It is not apparent from the online examples, nor by viewing the page source. That is what I was hoping to see in an example. The downloads do not seem to include the examples. marco
I didn't added much detail on that, because it's actually out of (the plugin's) scope.
You can load the content in any way, as I told you in the first comment.
Just use any ajax function of jQuery.
If you want to see how I made it in the demo, it's in init.js.
Inside: $sections.click(...).
Hi,
Quick question: how can I add a class of "current" to the link that has been clicked?
All links reside in #navigation
Thanks!
If I'm not wrong, that is done on the demo.
You don't need the plugin to do that.
var $links = $('#navigation a');
$links.click(function(){
$links.removeClass('current');
$(this).addClass('current');
return false;
});
Hi Ariel,
local scroll conflicts (they I'm using it) with jquery ui tabs. The problem is as follows.
I'm using:
$.localScroll({over:'-12.5'});
However ui tabs generate tabs using the href.
I could use probably the filter command to bypass
the div where the uitabs are put BUT that's where all the links i want to use wih localScroll reside!!
My problem is that the Main Tab titles when presseed have an undesired scroll to the page.
I tried to use filter with a class applied to the
ul generated for the 2 main title tabs with no luck.
A functional demo can be found at: http://www.deliverde.gr/flop
The source code is quite big (On the source code the tabs are generated on the header div which is towards the end)
I hope that I'm clearly stating my problem. Any help would be greatly appreciated.
thanks
ionline
First of all, 'over' is meant to be a number. Might work as string but...
I don't FULLY get the problem, but the options are always the same.
The jQuery object that receives the call to the plugin with tell the plugin where to look for links.
If you need to filter more links, use the option filter. It will leave some links out.
If you need to cancel the scrolling on some situations, you can return false within the onBefore callback.
Could you give an example on the use of onBefore please. Say I want to cancel the scrolling when the user clicks on an a tag with a specific href or rel.
thanks
$.localScroll({
.....
onBefore:function(e){
// instead of this
// e.target could be used
if( this.rel == 'foo' )
return false;
}
});
Hi Ariel,
the moving of viewport happens when the viewport size is smaller than the complete page :(
probably you use a higher resolution screen, but on low res testing the result is what everyone seems to have problem with.
let me know when you found a workaround for it.
-thanks
Eh ? I already said that the "forced" scroll is due to the option 'hash'.
You're not forced to use it.
Hi Ariel,
I have implemented your script and it is working beautifully! I have a small problem that I wonder whether you can help me with.
Since this script uses anchor tags the browser jumps to the anchored div after execution of the js. How can I prevent this browser jump?
Thanks!
Just read the my previous comment.
I cant seem to find your "init" code anywere? I am very much a jquery beginner and have looked over your code repeatedly and you always have something left out. What I have is on the left hand side of the page a list of dynamicaly created links "href" that I need on click to the scroll the content of the page to divs with the correct ids.
The "init" code is on init.js :)
Don't forget to set the option 'lazy' to true so that links can be dynamic.
Hi Ariel,
i'm not very skilled about jquery world...your work looks great and very useful!
Just a question!
How can I "highlight" the "li" section elements links on the left column (e.g. "Section 1-b", "Section 2-b"...) when click these links or when click on the "<<" or ">>" navigation elements of the scrolled divs (just to evidence which link is active in this moment) ?
Thanks in advance!
Nero
Hi Ariel,
I'me the author of the previous post (about the question of implementing an "evidence mechanism" of the target link, like an "a:active" css pseudo-class...)
I think i've found myself answer. I've modified your "init.js" in this way (see "Nero's changes"):
...
$.localScroll({
target: '#content', //could be a selector or a jQuery object too.
axis:'xy', //the default is 'y'
queue:true,
duration:1000,
hash:true,
onBefore:function( e, anchor, $target ){//'this' is the clicked link
/* Nero's changes */
var newlink = $(this).attr('href'); // get new link href attribute
var oldlink = $last.attr('href'); // get old link href attribute
$('[href='+oldlink+']').removeClass('evidence'); // remove evidence on old link
$('[href='+newlink+']').addClass('evidence'); // set evidence on new link
/* end of Nero's changes */
$last.removeClass('scrolling');
$last = $(this).addClass('scrolling');
if( this.blur )
this.blur();//remove the awful outline
},
onAfter:function( anchor ){
$last.removeClass('scrolling');
}
});
});
...
and then, obviously, I've added th following style section inside html page (could be inserted in css main file, i know it could be better...):
...
.evidence {background-color: red}
...
It seems to work!!! When i click on "menu" item-list or on "<<" or ">>" link, the correspond item-list background-color is changed!
I hope it could be useful for everyone else!
Regards,
Nero
Hi flesler,
I'm loving the plug in, but i was just wondering one thing. When the browser window is smaller and I click on a link, it creates extra space at the bottom of the window and moves the visitor down the page. I noticed this also happens on the demo page. I tried toying around with the css and a bit with the init.js, but nothing. Just wondering how I would prevent this from happening.
Thanks.
@Nero
The code just below yours was already adding a class called 'scrolling' to the link.
@Evan
Try removing the option called 'hash', just wipe hash:true, out.
im currently using local scroll just to scroll the entire page, nothing fancy but it works well and is better than the browser default. but now id like to add that little "bouncing" effect you have in your demo located at http://demos.flesler.com/jquery/scrollTo/ in other jquery plugins the effect is called "elastic" i believe. how exactly can i add this to what i have? i looked in your init.js file and it looks like the effect is coming from there, but i couldnt get it to work on my own and the localscroll blog post doesnt go into alot of detail about adding effects. is this already built in and i'm just not activating it or is there something additional i should be doing? thanks
this is the only code im using on my page in addition to calling scrollto & localscroll:
$(document).ready(function(){
$.localScroll();
});
Hi Thomas
First of all, get the Easing plugin.
Choose one of the equations and put its name as the 'easing' setting of localScroll. Something like this:
$(document).ready(function(){
$.localScroll({
easing:'elasout'
});
});
You can then add more settings if you want.
hi there! fantastic plugin!! i am currently trying to use it in combination with a custom horiztonal scrollbar and am having trouble getting things to work at all ... i'm wondering if they are not compatible with eachother or if i might have another option.
Any help is greatly appreciated!! the link to view is http://www.thomascornelius.com/profileInfo -- the vertical list of profile links in the sidebar on the left are intended to scroll the content.
the site is built on the Squarespace platform so i am working with some pre-set html structures.
+ Dana
Hi Ariel, thanks for this GREAT script. My LocalScroll works great in firefox and opera. but not in IE.
My pages do slide but after sliding the page always go to the last page. do you have any idea why?
Thank you so much :)
it would be nice to be a bit clearer that LocalScroll requires ScrollTo as well ;-) otherwise O for Awesome!
@Dana
You need to use links like #something for it to work. The documentation explains how.
@Patrick
Try removing the 'hash' setting ?
@Nicolaas
This blog post says (in bold :)) that localScroll requires scrollTo. I'm pretty I specified that pretty much everywhere, and it's included in the demos.
@Ariel
Thanks for reply my question. How to remove 'hash' setting?
Remove (if existent) the line(s):
hash:true,
i remove the line then it works well in IE now!!
Thanks a lot Ariel!
You are genius!
thanks :)
Fantastic plugin, great work.
Kiriakos
http://www.mockbites.com
You wrote in an older post about localScroll, that the plugin starts when the DOM is ready. And that's working fine, however I'm creating the menu anchors dynamically on user actions, but because they're not on the page when the DOM is ready, they're not getting indexed by the localScroll plugin. When the user now clicks on one of the anchors, they still see the page, but without the smooth effect of localScroll. Is there a possibility to re-initialize localScroll after a new anchor is added to the page.
(I'm using jQuery 1.3 with Live-Events)
Thanks for your help
hi
the localScroll plugin doesn't scroll the whole window in the latest webkit nightly (r41176). i'm trying $.localScroll().
Hi Ariel,
Thanks for your patience and persistence with everyone's questions. This is a great little script! Bear with me because I'm also a jQuery and javascript newb.
I've got the script up and running perfectly, and have used this bit of code to add a "selected" class to whichever section is currently visible:
var $links = $('#flipnav a');
$links.click(function(){
$links.removeClass('selected');
$(this).addClass('selected');
return false;
});
It works perfectly. But I'm wondering if how to add the "selected" class to the first nav anchor on the page when the page loads (so that the currently showing section--the first section is highlighted in the navigation). And, of course, that it's removed once another link is clicked.
Aww...never mind! I just discovered that if I add the class to the html, the script I cited above will remove it when a new link is clicked. Lovely!
@agentcmos
You don't need live events. LocalScroll has built-in support for dynamic content. Something like:
$.localScroll({
lazy:true,
// more settings here
});
@szinya
Did you try it with my demos or one from yourself ?
I can't get local scroll to work in Safari! Works fine in FF and IE, but in Safari it just jumps to the links as it normally would without the script. Any ideas?
No really, got a demo ?
RE Safari - I had this problem, for some reason Safari would behave like this locally but worked fine when uploaded to a server, maybe this will help...
Anonymous above was right. Uploaded it to the web and it works fine in Safari--just doesn't work locally.
Awesome script Ariel!
Can you give an example of how to use the filter setting? I want localscroll to work for all links on the page except for links within one specific ID. What would the filter look like for that? Please help ASAP!
@Anonymous/Benek
That's freaking odd!
@Benek
The filter option accepts a selector, so what you need is a little complicated to do like that.
What you can do, instead is something like this:
$('.container').localScroll({
// ... settings ...
});
or
$('#cont1,#cont2,#cont3').localScroll({
// ... settings ...
});
That will only add the behavior to the links inside those elements.
Thanks Ariel. Great plugins and great help. I've got another question for you about serialScroll which I'll add to the appropriate post. Cheers.
Ariel,
quick question, and forgive me if I missed it anywhere on this post. How compatible is this scroll animation, or local scroll effect with browsers? Will it work in all browsers? FF, IE, Safari, Opera, etc?
Ariel,
Ignore my last comment. I was able to figure it out on link you provided to some else earlier.
Hey Ariel,
First off, thanks for the plugin and for being so helpful.
Second, sorry to bug you with this--I'm a JQuery novice and as such my problem is probably really obvious. But I've been ramming my head against this problem for hours and I just can't figure it out.
As far as I can tell, I've followed your implementation instructions correctly--however, NOTHING that I do seems to be able to make the page animate when it slides. I have a horizontal layout and I want to use your script to slide the screen horizontally--instead, it just jumps as if its a normal anchor.
Please, please, please help. I'm pulling my hair out here.
You can see the site here: http://www.mynameispj.com/staging/
Thanks for your help! Its very, very appreciated
@PJ
Instead of:
$('#wrapper').localScroll.hash({
....
Put
$.localScroll.hash({
target:'#wrapper',
....
Ariel....I cannot even begin to express my gratitude. Thank you so much for your expertise, and for such a great script!
Hi Ariel,
Thanks for the great plugin.
After the scrolling has stopped I would like to highlight the element that has been scrolled to... is that possible?
Thanks
Hey Ariel,
Great plugin, but im having some trouble. I followed the directions however i am not able to scroll, can u take a look at my source code?
http://www.graphicallstars.com/demo/landing.html
thanks in advance
@Mark
To do that when it starts, just use a separate click handler. If you want to do that afterwards, you need to use the onAfter callback and some DOM traversing.
@Anon
You're meant to call localScroll on a link-container, that is, one or more elements that contain the links.
Just use $.localScroll().
Hi Ariel,
I am trying to play around with your demo for LocalScroll. However i removed the sub-links (section-1b, section-1c..etc) Everything works in IE but in FF, Sections 2 and 3 do not scroll. Sections 1 and 4 scroll fine, even after i scroll to Section 4, then try to go to Section 2, it goes to Section 1.
Any Suggestions?
@Anthony
Can you make a small demo and put it online ?
Thanks for the localScroll.
I was using the scrollable from the people of flowplayer. It did not give the freedom that your code gave me !
Hi Ariel,
SUMMARY: How to put two scrollers on same page?
Thanks for the code. I followed the demo code and one worked perfectly until i created another scroll on the same page. I needed two scrolls on the same page. I defined target: '#content1' for one and target: '#content2' for another. I duplicated everything but changed IDs, but later i realize $.localScroll({..}) on the same page will probably conflict, not sure. When i click on arrow on second scroller, it scrolls on both scroller even if the IDs are different. Hope to get some help with this.
I'm trying to figure out why the site jumps to the top of the slider when clicking on the slider navigation...it's the hash mark (#), that much I can figure out, but how to fix it?
link http://www.shop.synergystars.com
I'd appreciate any advice.
Thanks,
Peter
@Xander
Glad to know you like it :)
@Damodar
Instead of $.localScroll(), you can use $(...).localScroll(). That allows you to define link containers and only those inside them will scroll to THAT target, also, you can use the option 'filter' to choose specific links.
@Peter
It works well for me, except for "Today's special" because of the "'".
Hey Ariel,
I'd like to include all links into LocalScroll, except for one, with a certain ID. Is it possible to exclude this certain ID?
It is impossible for me to apply LocalScroll to all other links by class or id...
Thanks.
@Knalpiap
Use the option filter:
filter:':not(#the_id)'
Thanks, great! Works like expected!
What a great plugin....my hat is off to you Ariel. :) I've been digging around trying to find a way to also add a custom scrollbar to integrate with LocalScroll. I'm trying to build a custom "glossary" with an "ABC" navigation at the top where clicking on a letter will scroll down to the appropriate content....AND have a custom scrollbar on the right. Here's a link to a screenshot....
http://yfrog.com/0epicture1grep
Anyone have any ideas for me? Could something like this be integrated into LocalScroll?
Thanks a million in advance.
Hi Ross
Thanks... no, there's no erm.. official scrollbar to integrate with scrollTo and its siblings.
Can't tell a 2-line solution really, it's kinda tricky :)
Thanks for the message...its seems like it might be a bit of a ball of yarn. If this were a requirement to a project you were working on, what would be your next step. Maybe embed that text in Flash? I'm in a bit of a pickle. Any additional advice or hints would be greatly appreciated.
If you don't want/need the scrollbar to be draggable, then I'd put a setInterval that places the scrollbar proportionally to the window scroll position. A rule of three equation.
bar_pos = scroll_pos * (bar_container_height / document_height)
scroll_pos is $(window).scrollTop()
document_height is $(document).height()
bar_container_height is the height of the scrollbar pane.
To set bar_pos, you should change its top (css) property to that value (in pixels)
Something like that.
Local Scroll not working in Safari (>4) on Mac with LOCAL files. This bug drove me nuts for days! For some reason the local scroll does not work on a local html files, which is kind of funny ;)
I thought it was something to do with my code and spent more than 10 hours trying to debug it testing different scenarios. It worked with a hash when I refreshed the page, but when clicking on an anchor link it did not scroll properly. So if someone else has a problem with making it work in Safari just upload it to the web and it should work. I can only assume it's something to do with the URL or the way Safari handles local anchor tags?
Hope this helps someone.
Jeremy
Hi Jeremy
Sorry to hear that. If you email me a demo, I'll test it locally.
It works very well for me with local files on Safari (Public Beta 4).
But I gotta say that it's not very smooth in Opera 9.6x. The animation seems very sketchy.
Otherwise thanks for this great plugin. You might want to add info on how to add easing to LocalScroll. As a novice I had a hard time figuring it out.
Hi, first thanks for this grate plugin!
ah,my english is not the best,but i try to define my problem.
i copyed the code form your demo. And it works well on FF3 and IE7, but on Safari 3.2.1 it don`t srcolls the content pages. i can switch selection pages by clicking on a href, but it doesn`t srcoll.
could i send you a zip with the projekt fils? my e-mail adress is
eddy81@gmx.net
thanks eddy
Hi
Feel free to send me by email, I'll check asap.
Hi Ariel!
Thank you for all your jQuery Scroll plugins!
I was able to implement latest releases of jQuery.LocalScroll and jQuery.scrollTo for a site that has full screen window with hidden overflow.
I notice your SerialScroll plugins has features like 'Jump' option (like in demo) and 'keystroke' for arrow keys but not in LocalScroll
I was wondering if there are similar features listed in LocalScroll as well?
Thank You so much!
Hi
serialScroll doesn't have a setting called 'keystroke' but I get what you mean.
The thing is, there's no logical order when you're using localScroll.
There're just a bunch of links spread through the page. Still, you could do something like that. Grab all the links into a jQuery object and trigger the click event on the one you want to be scrolled each time.
Ariel
Excellent plug-in.
I've built a test page here:
http://www.growth trac.com/test_localscroll.php
It's essentially a basic version
of your demo, with "unnecessary"
code excluded.
What we need is simply this:
On a 'basic' page:
1. click a link and
2. scroll to an anchor
I don't understand why your demo only works (?) with the 'content' div?
Surely there's a way to simplify?
Thanks much.
Jim
I suppose I took too long, the demo is down.
Note that you have to tune up the 'target' setting to scroll something else.
Hi Ariel,
Thanks for the great plugin. I'm having trouble with jQuery created links in ie7 and below, they aren't being picked up by the script.
The Page
The JS
I can't work out how the lazy attribute works, so I can't see what I'm doing wrong.
Thanks for any help.
Sorry I meant to say, the hats are the jQuery created links, they are only altered once a localscroll link has been clicked at least once.
Can't get in with IE, throws odd errors. It works well for me on FF2, even the hats.
You could consider using serialScroll for the prev/next navigation.
Yeah, I stupidly didn't notice the serialScroll until I was half way through writing my own apparently terrible navigation code. I only asked incase there was something obviously wrong that I could change, I'll use the serialScroll instead, thanks!
Hi Ariel,
I'm one more very happy user of SerialScroll - thanks so much for all the time you spend helping us...
Everything I need is working for me (the doctorate really helped) but there is one thing that bugs me:
When using images as scrolled items, the animation becomes jerky. I actually copied the exact source from your demo (which is not jerky), added images, and was able to reproduce the same effect that I have on my site. If you are interested, I can put up my test page.
Do you have any idea why this is and how it could be fixed?
Thanks much,
Kat
Hello, I have been looking at your plugin for several days now, and I cannot seem to get it to work. I am new to jquery so I might be way off here but I do not see in your source code where you call the function. Anyways any help would be appreciated here is a link to the sample site http://www.thebuffalorose.com/RI2009/RI2010/index.html
when you click on the about us button it is supposed to animate to a container with an id of red, but it just jumps.
Can somebody please help me?
I have the same problem as Mike. I have checked and re-checked everything but can't seem to get the jQuery to do anything.
http://zkfolio.com/test/
when clicking the done loading it should travel to the #intro div smoothly, but jumps...
It appears the stop property does not have an effect when the entire window is being scrolled (not an element). Is this a known limitation?
It appears the stop property does not have an effect when the entire window is being scrolled (not an element). Is this a known limitation?
Got the same problem.
@Solid @dlnova
That's indeed a bug. I fixed in on trunk but haven't released that due to lack of time.
You can download the beta version which should fix that from here.
Thanks
hi, ariel
first of all, i love your work. really.
second - i must say that i never took time to learn jQuery as i should have.
now i'm facing a problem with the usage of jQuery.localScroll.
i could'nt get it to work, so i tried to copy the demo page to my server, and still - the animated scrolling didn't worked.
can you point me to what i'm doing wrong?
of course, i will remove the trial page as soon as i'll get it to work...
here is the link.
thanks, asaf.
Ariel,
I've been using jQuery.scrollTo in my website http://www.biologydesign.com and want to change to the .localScroll because it has the vertical and horizontal functionality, just like your demo. Where can I find the example of the scripting you used in that demo? I can't find all the scripting language needed from the .localScroll blog page. Any help would be greatly appreciated.
Thanx so much. I appreciate it.
Hi Ariel,
Am using local scroll and it is working very well when linking to a anchor in the same page, but when linking to a anchor in another page it does not scroll to the anchor when the page is loaded.
What should I do?
Thanks
I just tested your plugin with the iPad and unfortunately it doesn't work. The browser first jumps to the link and then scrolls to the opposite side.
It looks great with Safari though.. it's really strange. Do you have any ideas what could be done to make this great plugin even more perfect?
im using the jquery ui effect 'higlight' with ariel fleslers' local scroll. and i want both functions to run at the same time. the problem is, as for now, the functions are making each other queue. thats what my document.ready function looks like:
$(".button").click(function () { $('body').effect("highlight", {color:"#b0b8ff"}, 1000);
$('.navi').localScroll({ duration: 2000, lazy: true, hash: true });
written like that, the localScroll plugin waits until the highlight effect is done. setting "lazy" to false, the highlight effect is only executed after local scroll is done?!
am i missing something? is there a way to accomplish what i wanted? thank you in advance,
denis
Hi,
Using keyboard, localscroll leave the focus to the source link.
It should give the focus to the destination.
Demo : Pyrat.net
Use Tab, Activate "Aller au menu" (space or enter key), use Tab, your are still in the skips links.
Hey Ariel.
Quick note to say thank you for the plugin - it saved me lots of time!
Also, a little tech note: I think the .hash() method doesn't work if the URL includes arguments past the fragment (eg: www.example.com/page#section?arg1=val1 ).
That's because by the time we get to scroll(e, link, settings) and
var id = link.hash.slice(1)
The hash still includes the arguments (eg: #section?arg1=val1)
Not a biggie for me right now, but figured I'd let you know (.hash() or .scroll() may want to check for ? and drop anything past it if it's found)
regarding my previous post, I think this 'patch' works: replace the beginning of the scroll method from
function scroll( e, link, settings ){
var id = link.hash.slice(1),
elem = document.getElementById(id) || document.getElementsByName(id)[0];
to
function scroll( e, link, settings ){
var id = link.hash.slice(1);
var questionMark = id.indexOf("?");
if(questionMark>=0) {
id = id.substring(0, questionMark);
}
var elem = document.getElementById(id) || document.getElementsByName(id)[0];
I already have a hash in my url. Instead but adding a new hash, how do I change to / and add that to end of url?
Thank You
New to jquery and all that and site is under development under localhost, but I think there is a solution to my problem.
I have a topnav menu inside a banner that is 250px deep and fixed to the top of the viewport. I am using the menu with LocalScroll to scroll to divs located below the banner on a very long page. However, the divs scroll behind the banner to the top of the viewport. I want each div to stop scrolling at, say, 270px from the top of the viewport so the reader can read from the top of each div.
I hope I have explained this problem okay. My guess is there is an issue with my knowledge, which otherwise works brilliantly.
Hi. I'm having trouble with filter. I want to filter out all links with the class "on" so I write
$.localScroll({
hash: true,
filter: '.on'
});
But that causes the scroll to fail completely. I must be doing something wrong. Help?
Hi and thank you.
Is there a way to select my link instead of a link contener?
I would like to do:
$('.foo a').localScroll()
Hello, love all your demos and your responsiveness. Is there a way to use this so that you don't have to press an item to scroll? I'm trying to create a swipe feature for functionality on Ipad.
When the headers on our wiki include parenthesis, exclamation mark or question marks, etc., the smooth scrolling effect does not work. (The headers & #links have automated anchors tags on them in the wiki that match the header text).
The smooth scroll does not work when links have anything other than letters, so we need it to work with parenthesis, question marks, colons, etc.
Could someone make a suggestion?
Hi Ariel,
thank you for your greit plugin..
I'm tryng to integrate your plugin with fancybox but maybe there's something wrong.
I want to scroll to a div while opening a popup with my content.
DEMO
can you help me please?
thank you,
Stefano
This script is great! Exactly what I was looking for. I'm having an odd issue, I believe with the width of the parent and child elements, that I can't seem to track down. I am using a 1 page layout with 100% height and width "frames". Each click scrolls an entire frame. The issue I'm having is if I have more than 3 LI sections (frames) the navigation gets all screwy. Instead of going from left to right for each LI it ends up jumping around (down, left, right, etc.).
I have each li being resized to the browser width and height automatically and I have .section being resized to 4 times the browser width to accomodate each LI but it seems to break at 4 LI's in a section, 3 works perfect.
http://osw2.dev.thinkfullcircle.com (click Why Onsite Wellness? to see where the issue lies). Each of the subnav items (Activity, Nutrition, Physical Health) should scroll to the right.
Thank you for any hints you can provide.
Ignore my post...I figured it out (after an entire night of bashing my head against the wall). For the way I'm using it .section needed to be floated left (apparently) haha.
Thanks again for this awesome script and great write ups!
Hi and tanks for the plug in!
I use localscroll but the easing function doesn't work..
I'have include in the header jquery,scrollto,localscroll and easing plug in after that i have
$('#nav').localScroll({
duration: 4000,
easing:'elasout',
hash: true
});
is correct this ?
yhank you!
Just a heads up, I was using scrollTo in conjunction with localScroll, with jQuery lib 1.8.0 and it wasn't working in Chrome (21.0.1180.83). So I'm loading in jQuery lib 1.7.2 for the time being so it works.
Cheers,
Pete
You need to get the last version of scrollTo (1.4.3) it's been updated to work with jQuery 1.8
Ariel,
Is there a way to offset the Y axis value when using localScroll? For example, I have a navigation at the top of my HTML page that is position:fixed, so it always takes up 40 pixels of space. When I scroll to an element, the element is hitting the top of the page exactly, so my navigation is hanging over 40 pixels worth of content.
Is there a way to modify this before the event is triggered, to basically say "take where you would normally scroll and add 40 pixels to it to compensate for my navigation"?
Thanks in advance,
-Mike
Post a Comment To get help prepare a demo.