Links

245
comments:

Hi! First off, thank you for this amazing work, i really love it! I just started trying this out and i am getting some funky twitchy behavior on diagonal movement between divs in internet explorer 7... All other browsers are fine... Wondering if anyone had any thoughts?

I am trying to get New Ticker (vertical scroll) in my application. With a top->bottom scrolling animation. I cant get this working based on News ticker sample app you have. The animation works bottom->top, but not the other way??

Any way to know when the end of scrollable region has been reached? For an example, check out either Blog, Awards, or Mission at http://gdad.sva.edu - I'd like to display a message like "Bottom of page" when the user clicks Next towards the bottom of the screen and nothing happens (because there's no more scrolling to be done).

The psudo-code I'm using is basically :$(".scrollNext").bind("click",function(){

I've been trying for the better part of two days to get jQuery.ScrollTo to work for me. But, I don't completely understand javascript, so I'm not exactly sure what I'm messing up with--except that I absolutely cannot get the slow scroll going--though I CAN get basic navigation working. But the effect I want is to slowly move over a large page.

Basically, I'm trying to achieve the navigation effect of http://melissahie.com/ with 4 quadrants, rather than 6.

Hi Ariel,First of all, I'd like to thank you for this, it's wonderful!

Secondly, I want to reiterate what someone above said: it took me quite a while how to figure out how to make things work. The problem was that I was unaware of the necessity of an init.js file; I don't think it was referred to anywhere in the documentation (or I just missed it). For those of us who are relatively new to javascript/jquery, it might be helpful to mention this somewhere. This is not a complaint by any means, just an observation.

Lastly, I've been experimenting with the plugin a little bit and I'm having some issues. Essentially what I am trying to do is create a horizontally-oriented website that scrolls (horizontally) to the appropriate content. I have that working just fine. Additionally, I want there to be a "More Info" section that scrolls (vertically) to some content immediately below. This is where I am running into issues. What is happening it seems is that the page reorients itself to its origin and then begins to scroll vertically down from that location rather than that of the link. Sorry if that's a bit confusing, I have an example here:http://bencabot.net/AH/

If you click the first link, "About Anna's Hope" it will scroll you to the next section. There click the last link, "More Info" and it will instantly (as opposed to scrolling) return to the origin and THEN scroll down instead of scrolling down from where the "More Info" link is.

Sweet tool.I created 2 DIV tags and I wanted to slide the DIV on the right under the DIV tag on the left. Works well in IE 7 but on FireFox 3.51 I get a ripping effect when text from the right div slides under the left div.Does anyone know how I can avoid that?

I've been using scrollTo for quite some time, but am now looking to change things up a bit.

I am using the coda slider, serial scroll, scrollto, and localscroll.

What I want to do is load a specific panel, the middle one or #center on loading the page. So it will be basically coming in to that panel with two above it and two below. By the way I have vertical scrolling activated.

My sandbox is here:http://www.solutionarts.net/spindex.html

I've played with various settings, checked related posts and jquery documentation and cannot for the life of me figure this out.

I'd appreciate a punt in the right direction, but understand if you have better things to do.

Hi Ariel, thanx for the great plugin... i've used it in a website for both horizontal and vertical scrolling and it is working perfectly fine in all the browsers except opera. The problem is what the ajax calls. Whenever a portion of the page is updated using .net update panel, the page scrolls back to the first panel. Can you help me in this? Thanks

I've used the plugin to create a simple scrolling text pane. At the bottom of my text pane I have an 'up' arrow and a 'down' arrow, which the user clicks to make the text 'slide' up or down. This was very easy to set up and works perfectly.

However, is there any way to hide the 'up' arrow if the text is at the top or hide the 'down' arrow if the text is at the bottom?

@NomadosOk, the links below are working, the one that says "Blog" throws an error when clicked (check with Firebug).I'm not sure I understood what is that you need and what's the problem.

@TestOnly in opera ? odd. You could call scrollTo after refreshing to reset it ? do you have anything online for me to see ?

@MattIf the text is enclosed in certain elements, like divs, you could use serialScroll with has that option as a snippet. If you don't, then you'll need to check what's the scrollTop and see if it's at the limit.If you get me a link I'll check.

Ariel,I'm sorry for not being clearer.My page, http://www.solutionarts.net/spindex.html has 5 panels (top, centertop, center, centerbot, bot) using the coda slide and your associated js goodies. When the page loads the "top" panel is visible, which is the default (top down structure). I was hoping that there was a way where I could use ScrollTo to change the default behavior and have the "center" panel become visible after page loads. This would put the visitor to the site into the middle of the panels, so that they could choose to either go up the panel tree or down. ( I do not have the graphical links for the in-panel navigation created yet) I can accomplish what I want by pointing my A record to http://www.solutionarts.net/spindex.html#center but would rather use ScrollTo to make the change if that is possible.

I tried first changing in SerialScroll start: from 0 to 2 (center panel) but there was no effect. So I thought that the ScrollTo held the ability to make the changes I desired.

@Bostjan - Sorry for the green behind my ears, but where do I put this code?

In the HTML file? the scrollTo.js?

Again I apologize for my lack of knowledge. I've tested it out in a couple of different places. I believe my #container is called scrollContainer so maybe I am calling it out wrong. But I'm not getting any of the desired effect.

Hi! Could someone please help me...? I've seen the examples, and read lots of comments.. search the web and still haven't managed to do the following:

I have a div, with fixed height and width (not published online.. so i can't show it :( ), and i want to scrollTo a span Id inside the div.

So far so good! I can do it!

My problem is.... since the div is bigger then the available screen if the span i'm scrollingTo is at in the last row of the div it's going to be hidding.. since the browser doesn't scroll down to follow it.

The div is to big to center it in the middle of the screen...

I'm only using the following code:$(document).ready( function(){ $('#Div_Id').scrollTo('#span_Id'); });

@FlipSo you need to scroll the window as well if necessary ? that's not too hard, but not trivial either.You'll have to do some fun calculations using jQuery's width, height, scrollTop and scrollLeft to achieve this, good luck :)

I'm sorry, i jumped the gun and emailed you and didnt realize you had a very nicely active support area on the comments.

My issue is the same as BEN's

I have a scrolling horizontal website using the Tiny Scroller (http://www.centralscrutinizer.it/en/design/js-php/horizontal-tiny-scrolling/)

I wanted to use YOUR code to create a neat tabbed type effect for the content within the individual divs. The issue is that both of these plugins use the anchor tag to fire the effect.

So what happenes is that I click on an anchor link on the main navigation, it scrolls horizontally to the div it anchors to using this Nav. TextWhen I land on the page with your code on it (by clicking the link on my home page for "services") you will see the secondary navigation and beneath that the content that I would like for that page.

So if you click on those links for your code, you will see that the effect works just fine, it scrolls nicely and the content expands and contracts. I LOVE IT!!

But i think the Tiny Scrolling might be effecting it, because it also moves to the right as if it's looking for a div that is not fixed in the center.

I tried absolute positioning and stuff.. no such luck.

HERE IS THE LINK TO MY WEBSITE

http://design.bscphoto.com

I REALLY hope you can help me with this.. I think this addon is awesome.

also, do you get annoyed with the people yelling at you for not telling them step by step on how to work it into their own individual website? The tone in some of these comments is a little well, asshole-ish!!!

I think I got a LITTLE bit of an idea what is going on thanks to FireBug.. but I am completely and utterly confused now.

When i view my site using FireBug, I see the your div "panel" has an element.style width of 3500px.

This is NOT in the css, and i did a find of ALL of the documents and NOTHING showed up that gives it 3500px width. So my guess is some whacky javascript code that I dont know about.

Changing this 3500px width to about 650px in firebug ALMOST fixes my problem. Instead of scrolling all the way over, it only moves the content a tiny bit, which I have a feeling, once we get this settled, a little bit more css (maybe with your help ::WINK WINK::) this issue can be completely fixed!

Sorry if i flood this area with posts, but I want to try and give you as much info as possible so that when/if you do look at it, it is a little but easier. again here is the link:bsc design

HiIt's a little confusing to have both scripts. The content shows messed up on my browser (FF2).There's a huge white margin on the right. You seem to be including jQuery twice (no need) and thw.js is throwing an error.

Based on what you've done, I think localScroll would fit perfectly. You should check it out (and maybe remove thw?).

ok.. I would be fine with working with a different script that does the same thing if it's that easy.. I havent gotten to the point of trouble shooting in differernt browsers yet, I assumed Tiny Scrolling worked in your browser because the plugin creator SAID IT DID!! (but dont they always?)

So with the local scrolling, I can use BOTH scripts successfully on the same page with no issues?

Oh yea, and I called jquery twice cause i quickly copied and pasted.. OOPS!

I am going to recreate the site using your localScroller and come back and see if there are any issues..

in the meanttime, I am going to head over to browser shots and see what my site looksl ike in firefox2. It looks ok in FF3

I was able to stack the DIVs on top of each other by giving the position: block to the proper divs code and removing the float:left from the encompassing #panel div...

But it seems to be reacting strange and I'm not sure if this is how it is supposed to react.

When you click on the link, you will see that the div FIRST adjusts the height to fit the next div and then scrolls to it. When it does it, it shows some of the other div that is beneath it before scrolling..

Is this because I removed the float? or is this what it's supposed to do> I would prefer the height to change once it lands on the div that you clicked on

Quick question. I am trying to scroll on both axis. When I put in pixel values for each axes, as in the demo, it only uses one of them. i.e. It scrolls to the same place on x and y according to the number I place for x and ignores the y coordinate. I think I am just having a problem writing proper javascript syntax, but it seems I am writing similarly to your demos which work great.

I think the demo below will illustrate it well.http://ajbohac.com/mistynew/

am trying to scroll on both axis. When I put in pixel values for each axes, as in the demo, it only uses one of them. i.e. It scrolls to the same place on x and y according to the number I place for x and ignores the y coordinate. I think I am just having a problem writing proper javascript syntax, but it seems I am writing similarly to your demos which work great.

@PockyYou're trying to use jQuery and fancybox within javascript.js and it is included before the other 2.Note that you don't need to include both versions of fancybox.

Most of the calls to scrollTo that you make are scrolling to (0,0) and the second 0 is the duration (check the main post to see the right way to use it).I'd advice you to try localScroll (also on this blog) for this.

Ariel - How can I bind mouse wheel scrolling to a div that has height set and overflow hidden? Your examples don't really show how to do this, they all focus on logging the events that happen. I tried putting

This plugin is awesome. I have one problem, for some reason if I scroll to an element in a pane, and then refresh the window, the previous position persists. There is no option to turn this off. How do I reset the pane so it always loads the first element? Thanks

Hi, thanks a lot for this post it is brilliant!I am trying to put it into a site of mine and am just wondering if it is possible to set where the scroll stops. So instead of having it stop at the left edge of the screen could it be centered because I want the header and footer to be centered on the page and for the scrolling content to line up with this.

Very cool - thx. I'm seeing a bit of inconsistency on a simple, static test page I've up when I use IE7. Refresh after refresh it doesn't scroll to the same spot. Just wondering if my usage of "$(document.getElementById('anchor2_17').parentNode).scrollTo( document.getElementById('anchor2_17'));" is ok?

the ScrollTo Effekt really looks great on your Demo Page. I would like to implement it in my current project:http://www.kieferchirurgie-implantologie.de/web/html/11.htmlI linked all the .js files and modified the first link like shown on your demo page. I can't get it work though.Do I need the init.js file?It would be great if you could have a look on it.Cheers!Matthias

has anyone else experienced problems with a "jagged" diagonal animation in FF or IE?

i use scrollTo to navigate between a grid of divs (each 800x600px), and instead of smoothly scrolling diagonally, the separate vertical & horizontal steps in the animation are blatantly visible. is this a problem with my implementation, or just with the way these browsers execute scrollTo?

Hi First thanks for a nice pluginIt works nicely clicking on a link as described in demo butI am trying to use it as below: user clicks on a radio button called input#ouijQuery('input#oui').click(function(){ jQuery('div#reponse1').show('slow'); jQuery('div.postpop').show('slow'); jQuery('div#reponse2').hide('fast'); jQuery('div#reponse3').hide('fast'); });

As it hides quite a bit of text I would like to scroll smoothly back to top of page where I have div#site-topUnfortunatly I have just started learning jQuery and have not succeded so far !Thanks for help

Great plugin! Got it to work with prettyphoto plugin as a lightbox feature.However, I'm having a difficult time trying to get it to scroll horizontal only. I set the $.localScroll.default.axis value to 'x'; but it will never scroll past the fifth picture.

I have some problems scrolling after .click. My div is hidden until click(tabs), but I would like the whole window to slide to the bottom when I clik on #work (Arbeid picture). Is there any way(simple) to do this? I´m a newbie on jquery ;)You can view my page here: http://83.no/

I have this working when I scroll the whole window but I cannot figure out why when I try to scroll a particular div I get nothing - have a look at my demo at - http://dl.dropbox.com/u/411506/dave/energy-review/index.html - the top 2 large buttons on the left, the first one is set to scroll a div (not working) and the 2nd to scroll the window (which works).

I am really getting very confused with this plugin. I cant seem to find the call in anybody's sourcecode so i cant really get some clear examples.

When i look at my own sourcecode it shows the stuff that makes it tik.

http://liveartz.nl/dev/

Anyway i want the scroll to stop before it reaches the end of the scrollbar... How do i doe this, i know i should use the scrollTo script but when i replace it in de code it just stops working... I am having a hard time to understand this script because i cant see anybody's code (why is that anyway?)

HI there, is there any way I can tell the scrollto function to scroll to multiple div classes? I have a static navigation thats on every page and then I have dynamic content so every post thats generated has a diff id... So I'm trying to just assign multiple div classes in the link so that it goes to which ever div is present on the page.

The problem I'm having is that once an initial scrollTo() is called, the "page" is "locked" to that scrolled position (meaning, no matter how much I try to reposition the page, the release of a finger results in the page "snapping" back to the scrolled location).

I can't seem to duplicate this on another browser (desktop), so I'm wondering if it's a webkit problem on iPhone, but I really think it's a matter of the scrollTo not releasing the position that was scrolled-to.

In an HTML page I am accessing jquery.scrollTo plug-in with an embedded flash.swf file that contains 3 buttons using AS3 ExternalInterface.call("yourFunction"). It works great in just about every browser except IE8 (have not tested in IE6 or 7) which produces an error in the lower left corner of its browser window "Error on page." and no cool scrolling effect – Bummer Dude! The only thing I came across that seemed moderately helpful was to give the embed code an "id" attribute but I am not sure how to even do that.

I would love to use this... but I've been trying for a couple hours to get it to work and cannot. I'm a 10-year javascript veteran, but only a little experience with jQuery. Can you please post a simple & complete example? The "Demo" is completely bewildering. I just want to make two arrow buttons make a div scroll. Thanks!

Question:Hi,In an HTML page I am accessing jquery.scrollTo plug-in with an embedded flash.swf file that contains 3 buttons using AS3 ExternalInterface.call("yourFunction"). It works great in just about every browser except IE8 (have not tested in IE6 or 7) which produces an error in the lower left corner of its browser window "Error on page." and no cool scrolling effect – Bummer Dude! The only thing I came across that seemed moderately helpful was to give the embed code an "id" attribute but I am not sure how to even do that.

Please Help Me!!!Confused

---------

Hi Richard,

This worked Thank You Again!!!

To some it up: replacing the embed JS code AC_RunActiveContent.js with swfobject.js eliminated the ActiveX error "Error on page." I was encountering with IE.

Of course this change opened another can of worms. The CSS that I had applied to the flash div container no longer worked e.g. position:"fixed" etc. To get around this problem I found a post by Vincent Polite on Google groups and followed his advice. Here it is and I quote:

"When the SWFObject is actually embedded it does replace the div named inyour code, and the css associated with that DOM node disappears.

The recommended approach to deal with this is to create a container divaround your SWFObject div and apply the styles there. Presuming you havecontrol over the naming convention and the css file, this shouldn't be hardto resolve."

I'm trying to use ScrollTo to scroll to the open pane contents in an accordion.

My divs are class "pane" but I'm not sure how to invoke scrollto to scroll the window down to an open pane..?

Any help appreciated!

BTW, the div.pane has a style switch to make it active done thru jQuery tools, so I tried this:

$('div.pane{style="display: block;"}').scrollTo('max');

But I'm pretty new to all this and not at all sure of the syntax for selecting a div of class pane with style="display: block" .. which is waht shows in Firebug when inspecting the currently open paragraph in the currently active div.

In jQuery tools accordions, a header precedes the div of class pane, which includes the paragraph of content.

The header switches from class="" to class="" when clicked and the paragraph within the div switches to the style setting above from style="display:none".

Hope that's clear. I'm lost in the selector language to get down to that active paragraph and scroll the window to is.

Can I ask you if ScrollTo is able to achieve a scroll effect found on Apple's site (http://www.apple.com/ipad/apps-for-ipad/)

The effect on Apple's site is hard to explain, but basically it doesn't scroll through the whole page, but it skips part of the page. There is less animation and it is less disorienting (especially on very long pages).

I have the scrollTo plugin working on a large block of text (all text is visible, no overflow settings). I noticed that if the text size is increased/decreased (in any browser) the anchors are no longer precisely located. Is this a known issue or is there a fix?

Ariel - Many thanks for your great work on the 'scrollTo' to plug-in. Using it as an alternative to Microsoft's 'scrollIntoView', was able to scroll GridView rows smoothly and limit screen changes to the GridView itself!!

Here's some tips for using jQuery and your 'scrollTo' plug-in in a Visual Studio 2008 (SP1)/ASP.NET 3.5 AJAX-enabled project which uses 'master pages':

1.) In the 'master' page file (*.master) place the *.js file references in element: head before the first 'ContentPlaceHolder'

2.) When referencing 'document' elements in Javascript, use the Microsoft 'ClientIDs'. For example, given a GridView (grdviewSearchResults) within a scrollable div (scrollableDiv), here's one means to 'scrollTo' to a specific row in the GridView:

- Iterate through the GridView rows, maintaining an index: ii to the current row - Upon finding the 'to be scrolled to' row do the following

jQuery("#<%=scrollableDiv.ClientID%>").scrollTo(row); //Scroll the div to the selected row

- Please note: To makes things easier to read, prefer to use 'jQuery' rather than the rather cryptic '$'. Also, ASP.NET appears happier with double quotes in the parameters rather than the single quotes found in many published jQuery examples.

Hi Ariel, thanks for this plugin i really love it; i was wandering if it's possible to bass a variable instead of a number; something like this:

$('.triangolo_top') .click(function () {

var numero= +$(this).attr('title')+1;

$(window).scrollTo ('li:eq(numero)', { duration:500, axis:'y'})}) In this specific way doesn't work, i've tried so many times to get this script to work without success; you can have a look to a reference page at:http://500-1.omnigrafica.it/prodotti_sottosezione.html

Having a blast with the scroll.to and local.scroll-- thanks for the great scripts! I am learning a lot from both.

I have four large screen sized divs, 2 on top, 2 on the bottom, in a wrap creating a single page website with horiz/vert/diag. scroll. Each div is a linked 'page'.

My issue is when a horizontal scroll is triggered from the floating nav menu, originating from a bottom div, I get a quick flash/flicker of the top div contents just above before it scrolls to the correct div. It doesn't happen when I scroll from a top div.

ex. 1234

When scrolling from 3 or 4 to anywhere else, 3 will quickly flash the contents of 1 before scrolling, 4 shows the contents of 2, but 1 and 2 are fine.

Great script and tutorial!Quick question. I am using this tool for some horizontal scrolling.

Works great, but when jumping to a particular anchor, it always alignes to the very left border of browser.Cant seem to get things to stop sliding in more towards the center of the container.Please let me know if you have any advise.Thanks much!

One problem I'm having though. I'm trying to scroll.to a hash and it works great when the browser is larger than 1000px wide (which is the width of the site). However when I'm down to a smaller width the scroll.to moves the content to the left instead of scrolling in a straight line. As if the x coordinate of the div changes.

Hi and thanks for this very nody bit of code.It's great. I have used it succesfully so far but have just added a jquery accordion and cant get them to work together on the same page.I can get one or the other to work on its own but not both. anyone knows how to get around this and use both scrollTo and accordion on the same page?

hey flesler, I've been having browser problems.. I'm very new to this stuff and I'm no programmer by any means. Everything works perfect in Firefox, however in Safari, every link that is called by link isn't working at all. What do you think could be the problem?

This plugin is awesome, but it needs some updates. Currently it doesn't work with jQuery 1.4.2. As soon as I upgraded jQuery it stopped working with an error message: "val is undefined" around line 158. and adding the statement

if (typeof val !== "undefined") {

}Like the post on http://plugins.jquery.com/node/16591 suggest, doesn't work, it just bypasses the error and scroll doesn't work.

NIce code! I've am able to scroll to my selected divs. However I would like the page to scroll but offset the div vertically 200 pixels from the top of the window. I've been trying to go over the examples but I'm a little confused on how my I should change that above code to make the offset work.

Hi,I am using the following script for a vertically/horizontally sliding website which is based on scrollTo. My problem is that I just don´t know how and where to add the hash:true feature. I tried to add it exactly where the queue:true is but it is not working. Any idea what I can do to see the hash link in the browsers address field? Thanks for any help.

I making some minor fixes to my current scrollTo implementation and I came across a bit of a bug. I was trying to get the $.scrollTo.max() of my container element and it was only returning "NaN". I looked into the code and found that on line 200, it was trying to return elem[scrollHeight(or Width)], which wasn't supported by the element I was sending to the function.

I fixed this by changing "elem[scroll]" to "$(elem).attr(scroll)". This works perfectly for me in Firefox (haven't tested in IE), but I would assume that using jQuery to target the scrollHeight would work out better all-around.

Dear Ariel,I have used your local scroll script (simply took the example at http://demos.flesler.com/jquery/localScroll/) on a webpage of mine.

All works perfect and in all browsers (well, did not try older than IE8 or Firefox 3, nor Opera), on both Win and Mac.

I can tweak speed, x and y, etc. However, I am stuck with two problems: after one or two scrolls, clicking the browser 'back' button does change which #foo is displayed in the url bar, but it does not actually scroll back to that #foo, basically my back 9and forward button(s) are useless.. It would be desirable to have them work as well. Help..

Second problem: I want to implement some scrollTo functions, mainly some easing at the end of a scroll, but wherever and however I try to modify my init.js, no go, either the whole scroll effect disappears or the links stop functioning altogether.

First of all, many-many thanks for taking the time to put this together and share! I greatly appreciate it!

As some of the others, I'm also facing difficulties in making this work with Opera 10.62. Simply nothing happens when I click on the links that would scroll the content. It works fine in other browsers, even with IE6, tough. Is there any solution for this?

Hey there, I wanted to know why the plugin is currently making me click the link twice in order for it to scroll. It only happens when you first access the site. It loads a hash, then once you click it again and it scrolls.

This is really weird. I've used the same script on a regular vertical scrolling website and it works fine with one click. Your help would be appreciated.

Ariel - This is indeed some nice work and I'd really like to use it for a project that I'm working on, but I fear that you have fallen victim to a disease that seems to plague more and more developers these days: Releasing Code With No Working Examples.

You've obviously taken great care to provide extended demos showcasing the power of this plug in, but without some barebones, practical examples, developers like me (who are admittedly more than a bit obtuse when learning new concepts upon occasion) have a hard time using it to do even the simplest implementation. Now obviously there are plenty of people who have been able to use it right out of the box without any included examples, but I can guarantee you that there have been plenty of others who have checked it out and tried to use it themselves but eventually gave up out of frustration. A lot of them may not have voiced it via comments for various reasons, but they're out there, probably looking for an alternative plug in that's easier to get up and running.

Please don't take this personally, because you're not alone. This problem is actually fairly wide-spread and it's time that someone made an issue out of it so that developers will stop the madness. Please, people, for the love of God... start putting example files in your code releases!

Thanks for listening. Now I need to take my meds before the orderlies show up and force feed them to me again...

I had the same problem "Carl M. Gregory" had. I don't know how the hell you he unpacked the minified version.

In IE8 I was getting "Line: 161Error: 'slice' is null or not an object".

The problem is that when I called ScrollTo; the target (first parameter) the target had no items (Zero Length). I had to adjust my original script. Scrollto is fine in this instance. The error is unclear. Maybe Ariel would be kind enough to throw an error when the target is 'empty' rather than continuing normally.

your plugin has inspired us to build this experimental web site: http://www.ufa-lab.com - it works great and powers all of the scrolling behaviour :)

I also get the jittery scrolling when doing scrolling diagonally in IE7 (and Safari on Windows), but use the 'queue' option in these browser versions. I assume that it is rather an implementation issue in this browser/OS combination and not a problem with the plugin or CSS styles.

Great script works a treat...but... It's causing page load flicker for me in IE. I use <meta http-equiv="Site-Exit" content="BlendTrans(Duration=.1)" to normally solve this issue, but adding your plugin stops it working. Any ideas?

I am having an issue installing scrollTo properly. I've spent over 4 hours on it and can't figure it out...

Here is the page I am working on http://www.smudgedesigns.ca/evolve/evolve

It scrolls to the proper div, but I couldn't get the localScroll url hash to work properly and most importantly, when you click the links too fast the animation messes up and waits to finish before starting the next click animation. I tried implementing a stop() on the click function but it didn't work. Please help. Much appreciated.

i am using the script. one problem. i have links 1-8. it shows 1 first. what if i want it to be centered and show,let's say 4 first? so when you click 1 it will slide left. when you click 7 it will slide right.can you help?

Anyone know hot to use a mask to hide overlow/horizontal scroll bar? The tutorial will work great for the site I'm working on but I only want one box showing at any given time. I've seen tutorials that use a mask div that is smaller than the container so the extra boxes are hidden but it doesn't seem to work with the horizontal scroll tutorial.

Hi Ariel - your plugin is fantastic, most notably for me because of the xy scrolling.

I am using the xy scrolling for the photography section of my company's website (http://focus97.com/photography.php) and want to decrease the load time of that page by using Ajax. I am only days away from formally launching the site to thousands via email, and still need to load more photo galleries. The http requests are already high on that page and so I found this page:http://demos.flesler.com/jquery/localScroll/ajax/

Before I work to implement that, I want to ask whether something is possible. Your demo above uses ajax, but loading a new section simply fades it in (with the section then having the scroll in the x direction). As you can see on my site, I'm scrolling category sub-panels in the x-direction, with whole categories themselves scrolling in the y-direction. Is it possible to load the categories via ajax, and retain the scroll? As an example, if you visited my site above, you would get the entire 'fine-art' section loaded into the page. Clicking 'commercial' would then load via ajax that category's content, and once loaded the panel would scroll down to the content (which could then be scrolled left/right to see the three commercial sub-panels).

I hope this makes sense. Ultimately I will be adding a fourth category, and I'd love the overall categories to be loaded via ajax while retaining the xy scroll rather than a tabbed/fade effect.

(As a sidenote, regardless of whether the above can work, I'll be building a credits page under my About section, listing developers/links that help the Focus97 site to work the way it does. Glad to give you credit, as your plugins are fantastic and your support is shown too be great.)

we have been using localscroll 1.2.7 with ScrollTo 1.4.1 on a site for couple of years. But suddenly it does not work on IE 7 or 8 (it works in IE 9) though. The error is "A security problem occurred". We are using with JQuery 1.3.2. Any idea how that could happen?

-- adding the .stop(true,false) - which seems to fix a problem I was having. With the default 1.4.2 file, I couldn't manually scroll immediately after the scrollTo function was finshed.. it would flicker and come back to where scrollTo landed then after about 10 to 15 seconds it would let me scroll as normal. I also tried to use the onAfter and call alert() with the default to try to see if that was the problem, I received about 20 alerts, then I was able to scroll. So I thought for some reason it was animating when it should have stopped long ago.. weird problem. I didn't see anyone else mention it, so maybe it's something to do with the jQuery version I'm using: 1.4.4

Just in case someone else runs into this issue, otherwise great plugin. Thank you!

This is a really nice script. I am building a site where I want to use both the ScrollTo script and JPlayer. JPlayer uses jquery.min.js to function properly. However that scripts seems to cancel out the ScrollTo script. I noticed that when I took out jquery.min.js ScrollTo works fine but then JPlayer does not work.

Is there a way to have ScrollTo work in conjunction with this jquery.min.js script.

Hi all. I am building my portfolio site based off of this script. It's amazing, but has anyone had a problem where clicking on the anchored link pops you to the anchored section, but then the scroll begins to work. The anchored section flashes and then the window begins scrolling over it. Has anyone gotten rid of this problem if they have had it? I'm on a mac using chrome and firefox, it does it on both browsers.

Thanks for sharing your amazing work!I know HTML and CSS quite well but don't know enough JavaScript, so I often resort to implementing JQuery plugins by trial and error, which can be a bit frustrating.

I'm having trouble implementing your ScrollTo script. Your demo page is very complicated for a non-JavaScript expert. I've spent a week going through your pages/demo's and it's been quite a struggle understanding how it all works.

My design is all on one large page. Initially you see the top left "home" portion of the page. The rest of the content is off screen. There are a bunch of links in the "home" area. When you click on them the page scrolls to specific DIVs. It all works fine except I want to separate the movement so that when you go to a DIV it travels first x-axis, then y-axis, but when you click a link to return to the "home" posstion, it travels y-axis then x-axis.

I see you have a lot of requests and comments here, so it would be unfair to expect a personal response. Maybe you don't have time to be so specific (which I totally understand) but for future users it would be amazing if you could break the implementation steps down. eg.:

1: Link these JavaScript files in your header.

2: This is what a typical link looks like.

3: In the link, this is where and how you specify the target that you want to scroll to.

4: This is where you insert the various options for the target (DOM element, absolute position etc)

5: This is where you specify the "scrolling style." (Easing, queue, duration etc)

I'm looking at the code on your demo page and you have an external JS file called init? Is that required for the scrolling? I tried just the external scrollTo-min.js file with a link that looks like and it's not scrolling at all. Then I tried implementing what you have in the title section of your links, and that didn't work either.

Hi!Thankyou very much for sharing your work, Ariel.I've been using this plugin for several years now. I just want to report that it has stopped working properly in some recent version of Chrome (I'm now in version 10.0.648.204): the scrolling effect always starts from the top of the page now when using $.(...) (i.e., when isWin===false), even if you are in the middle of it. And thus there's no scrolling when moving to the top: it's an instantaneous shift.Looks like a Chrome bug to me, but my understanding of this kind of things is limited...Does this happen to anyone else? I have detected it in my two websites.

OK: I reply to myself. Found that the same version of Chrome was playing nice with the plugin in my workplace's PC. Immediately thought of the last installed plugin, and voilá. Turns out that the culprit was "Screen Capture (by Google)". Somehow it messes with the document node. Or so.Best regards.

Have you heard of any issues with scrollTo in IE9 or Chrome 4. I got it working just the way I wanted then tried it in both IE9 and Chrome 4. Neither scroll the content. I can hit the page from IE8 or IE7 and it works fine. Any ideas?

First this is a wonderful plug-in that you have created. I am just starting out with JQuery and JavaScript in generally I know the basics. So forgive this silly question.

When using you plug-in it seems to break when ever the window is resized, I can see that the "resizePanel();" however this functions returns as undefined which breaks the layout for the site. Can you please point me in the right direction.

Thank you for the plugin. But,I tried to use this plugin to scroll down the page using jquery.scrollTo('max', { duration: 1000 });

It scrolls to the end of window fine. When the window scroll bar is used to scroll it up again, it tries to stay back at the position to which it is scrolled resulting in a jurk. Also upon page refresh, it goes back to the scrolled position. Is there a problem with the way i am using it? Please suggest.

Hi, i need help with my project.Im creating a menu using this plugin. Does the 'viewArea' should be set to 'overflow: hidden'? Can it be set to 'overflow: show'?My 'panels' are menuHome and menuAbout while my 'viewArea' is menuIntersection. When a panel is selected, it should scroll to inside the viewArea. Thanks in advance.

Here's the code.*i just added '-' because the form says it wont accept DIV tag.

Hello, first thank you for sharing this plugin and make available, wonderful. I wonder if you can enable those buttons clicks to go back or forward the content before or after. I read all the contents and found no reference about it. Thanks in advance for your attention.

Really love the plugin, works great! I have one problem though, when scrolling to a DOM element other than the top, the scroll jumps/jitters slightly before it animates. here is the example of what i mean: http://www.maxhenchman.co.uk/

Hi!Anyway to get this scroller to move to the center of a div/center a div on a page? You can only get the div top left coordinates. My issue is with changing screen resolutions, especially when moving diagonally and you specify an absolute coordinate with a set-sized div (heigh/width).

Hi!Anyway to get this scroller to move to the center of a div/center a div on a page? You can only get the div top left coordinates. My issue is with changing screen resolutions, especially when moving diagonally and you specify an absolute coordinate with a set-sized div (heigh/width).

I must say this is a great plugin. But can I invoke this plugin on a page load event instead of onClick? My purpose suits that this plugin is called from inside jQuery(document).ready(function(). Is this doable?

You have really created a wonderful piece of work. I'm a beginning js/jQuery developer and am thrilled by the versatility of your code.

I have a site I'm working on which needs custom scrollbars. I've included the plugin by Kelvin Luck, jScrollPane (latest ver), and your plugin as well. The thing is, they scrollTo shuts off when I have jScrollPane enabled. If I comment jScrollPane out, however, it works just fine. Any ideas on how I might be able to address this? I know jScrollPane has its own scrollTo functionality, but I need yours for the selector power. Would I need to edit jScrollPane's scrollTo functions in the plugin somehow?

I'm trying to get this working with a jquery mobile app using the scrollview. once the user flicks down my search results and tries another search, I'd like to reset the scrollview. Do you have any experience with using your plugin with the jquery mobile scrollview?

Hi guys. I'm using scrollTo and localScroll on a couple of sites and it's working perfectly in all browsers except for Google Chrome. I'm simply setting all anchor links to scroll on the page using: $(function(){$.localScroll();}); Any ideas why it isn't working? http://www.ulladullawebdesign.com and http://www.hsconsult.com.au