Yes, sorry about posting to the ScrollTo page. Feel free to move the comment if you like.

What I mean by breaking the back button is that when using a javascript scrolling animation to facilitate in-page links, the expected functionality of the back button is broken for many users.

I've seen this in countless usability studies on sites that implement an animation for in-page links.After clicking an in-page link and being taken to the appropriate location on the page, the users expectation is that the back button would take them to the previous location on that page. However, due to the javaScript implementation, this is not the case, instead the back button takes them to the previous unique URL in their history, because the URL was never updated by the in-page link.

Normal in-page links avoid this by updating th URL in the history to include the hash and corresponding id value for the anchored location. However, they pose the issue of being disorienting to the user because of the visual "jump" down the page.

So what I'm looking for would be the best of both worlds, an animated page scroll to provide the user with visual feedback that they are being moved to another location on the same page, and an updated URL in the users history in order to keep the behavior of the back button in line with user expectations. I imagine it would be something like a cross between your localScroll plugin and Asual's SWFAddress (http://www.asual.com/swfaddress/)

Hello, my congratulations for the development of this plugin. I'm having trouble working with the plug-in IE6, the real problem is that the plugin does not work in IE6. In FF, IE7 the plugin works fine, but does not work in IE6. See: http://www.mariaaugustarossini.com.br/temp/palestras.html

I'm experimenting with the onAfter and onAfterFirst functions in the arguments of serialScroll.

I want to scroll the div back to start after it finishes the whole list of li elements, how do you think that needs to be done?The onAfter scrolls back to the start after EACH li, but I need to have that after the last. Please help?

I saw your other post, but blogger has been working funny and couldn't reply.The problem is withing your html/css. The items are clearly not horizontal on IE and the overflow is showing (no scrollbars). Check your markup and css.I took a quick look but couldn't find the reason.

@AnonymousNot for now, check previous comments on the blog to learn more.

First of all: Thanks for the real cool script. I implemented the serialscroll (shown in the example at http://demos.flesler.com/jquery/serialScroll/) on my website and it works just fine.Still I would like to customize it a bit in order to start the scroll effekt by mouseover instead of click.How am I supposed to do that?

Ariel, thanks for your great work on the ScrollTo plugin. I'm not having any trouble getting it working, except when I try to use the jquery svg plugin (http://plugins.jquery.com/project/svg) at the same time, and switch the DOCTYPE to the XHTML + MathML + SVG 1.1 doctype for that plugin to work properly. I then loose the use of your plugin, even though that's an acceptable doctype. Any ideas? Thanks,

Is it possible to have the scroller work and also add the hash to the URL?

I tried this simple thing, in the selectNav function i tried adding

windows.location.hash = $(this)attr('href')

which worked as far as putting it in the URL, but then it stopped the scrolling, so it just jumps to the right spot instead of scroll, and the prev/next buttons do not work right (i am guessing because these are set after the scrolling that isn't happening)

anyway, nice script, but it would be so nice to be able to have those hashes so that it would be easy to bookmark or send to someone.

Hello Mr. Flesler!!!I have been working on a project since 7 months and now its online at www.mukuru.com

I was waiting for the website to be online so that u can see what i have the problem.

Ok if u go to the database, select ur country and currency and u will see the CATEGORY BROWSER based on ur scrollTo plugin which is looking awsome. I just need arrows on the sides with those yellow dots.

I spend weeks on it but it doest work i dont know why and also how the dots will be changed accordingly, automatically.

Hi ariel,I'm an italian boy so my english is not perfect.I used your fantastic plugin (serialscroll) on my site (www.fabriziodilello.com) but with opera 9.5 don't works. I can't see the scrolling effect.I don't understand where is the problem.Can you give me your help ? Thanks.

Hi,I'm working on a product documentation and cant make ScrollTo working. I have a treemenu on the left side and the documents are loaded in an iframe on the right. I could not find a demo on how to use the script with an iframe. Maybe I am blind. I just want to click on a link in the treemenu and scroll to the corresponding anchor in the iframe.Any help? thx

Hey Man, This plugin is amazing. I love it. I've been working on a site that uses it heavily for navigation. One of the problems i had that was fixed in this update was the absolute positioned objects breaking the scroll, i'm happy to report this update did fix it... for the most part. I'd like you to take a look at www.cafe4ms.com/final and navigate around and you'll notice that some of the scrolling is quite a bit jumpy, i just wanted to make you aware incase a solution came to mind. Thanks again so much for your effort!

Hi, I totally love Scroll.To and I am in the progress of implementing it in a website right now.

Just one small catch. Could you please let me know how to set up an initial location? Let me be more specific. I would like it so that when one opens the page the viewport isn't at top:0, left:0 which is default, I know, but rather passing some initial coordinates which would place the vieport at top:50%, left:50%.

Any other type of positioning will do just fine. Oh, and I only need it to start there, not animate from top:0, left:0 to top:50%, left:50%.

Using localScroll, I'm trying to get access to the #id of the justScrolledToElement in order to manipulate it further. In the demo below, I'd like to show the image once it's been scrolled to. Please see the note at the top of the page.

how can i move the element tha i've clicked to the top of the visible area? for example: i've a button at the middle of my page, the i scroll down slowly manually until that button is almost visible, but it's at the bottom of my visible area... what i want is that when i click that button (div, or link, whathever) then the scrollto function moves the scroll bar to get that button visible near the top of visible area.

i hope that you can understand my idea. It's something like 'ensure that the clicked object is visible and at the top of view'

I was about to post a question, but then I found the answer, so here you have the question and answer:

Q: "How can I scroll an iframe from within the iframe? I'm trying $(document).scrollTo(0); but it isn't working inside the iframe, altough it does work when loading just the iframe html (aka "show this frame only")"

We found that the newest version of FF (3.0.6) returns a float for some elements on the page when you call offset().top .. this causes your plugin to break. We modified the RegExp to test for decimals as well, which fixed the problem

I am lost, lost, lost. I LOVE this idea but I cannot make it work. It looks so simple but all the demos and Q&A here are just confounding my thinking.

(I must be missing something ridiculously obvious because everybody else seems to have this thing working!)

If I have a container div #pane with links inside assigned to class .link and I have separate content divs organized within #pane, how do I tell each of those links to scroll to the different divs within #pane??

I have this:$('.link').click(function() {$('#pane').scrollTo({top:'960px', left:'960px'}, 800);});

This is the sexiest javascript in the world! It makes the web look like it's no longer just the web. wow.

Unfortunately, like many other users, I'm living beyond my own technological means -- I have a problem that I can't track down. So I apologize for my ignorance, and sincerely hope that you can help me ... without wasting but a moment of your time.

Here's the test page:http://www.eastlakeunionlofts.com/xtemp/

works fine on ff/chrome (depending on settings, it gets jerky in ff, but i'm sure that's because ff is a slow lumbering giant). broken in ie6/7 (i don't have 8 but i assume it's broken there too).

it throws an error that i'm having a hard time tracking down, essentially it seems not to recognize $.scrollTo at all, but it did before ... so I don't get it.

i just wanted to reassure you that it sure took me a long time to interpret the instructions and get it working. so, no, you're not the only one. of course, when i was working, it seemed to make a lot more sense, and it just little mistakes on my part all along. the problem as i said above is just that i'm ultimately a little out of my league, have limited tools and don't trust myself. but you have to start somewhere , so i say why not at the top!

Nice work!! But I am doing something wrong...I am scrolling 8 images vertically, with a button for previous and another one for next. Everytime I choose previous or next, the scroll bar goes first to 0 (very quickly) and then to the next (or previous) image. This happens very quickly but the result is anoying, like flickering. Im not using the script from the demo, but it looks like it does a reset before any scrolling. What am I doing wrong?? Or how can I break this "reseting" and make it smoother?Muchas gracias amigo. Continua!

I have uploaded a test to http://www.awebbreservation.com/post/ yet I cant get it to work, there are no errors in firebug, so the script is fine, I just wondered if you can have a peak and let me know where I have gone wrong. Many thanks

@ChopperYou somehow messed up the scrolling. There's a lot of floating and position:absolute elements.See what happens if you remove the overflow:hidden from #frame.Try to simplify the styling, with less position absolute. Also the element to scroll MUST have overflow of some type.

hi Flesher, firt a need say that not domain the englihs, but I need your help fon use you great creation, Im a beginner programmer and Jquery like me for my projects, I use the localscroll and think that not have a problem, the cuestion is that I cant understand how makes? the efect that the container seem like a windows and how make that only see part of of the text,I hope to have explained.thanks for you time.

Hi there! It's really great and useful plugin, but I wanna to ask one thing: how can I get number of current position or element that right now in viewport when I scroll page in traditional way with mouse or scrollbar? I mean how can I get a number of current viewed element in http://demos.flesler.com/jquery/scrollTo/old/ for example?

I'm loving the plugin but I'm having trouble implementing it as follows:

What I'm looking to do is have a stack of content windows that, when prompted, will ALWAYS scroll from bottom to top. For instance, suppose I have a target pane (960x600) with 3 pieces of scrollable content sitting just beneath. What I'm trying to achieve is to have each piece of content slide into view from the bottom of the target pane; and then have each subsequent piece of content mirror the same action irrespective of where the target pane is positioned (i.e. the old content will slide up and out of view, and the new pane will slide in from the bottom).

I'm thinking of resetting the absolute position of each piece of content, and calling the scrollto function in an identical fashion. Something like this:

Hi Ariel,I have been trying for days (without success) to plug into this great script.I wonder if you could help?See the demo at(http://www.brthomas.co.uk/files/testscroll/)When a user clicks on an image (that is NOT above the funnel) I want the image to move to above the funnel. DONE :) (but also would like the belt to stop auto scrolling at this point, ideas?)When a user clicks on an image ABOVE the funel I need it to run a separate JavaScript function that will cause a flash movie to play, I also need it to pass the div id (which will be unique for each div on the belt) to the JavaScript

I have tried onbefore after function but can’t even get them to fire? Probably due solely to my lack of understanding of java.

I have the JavaScript function to run a flash movie working from a text link, I just cant invoke it from the belt (when over the funnel)

I'm using scrollTo on two pages (a.html and b.html) and want to add some navigation links like this:

a.html - has the scrollTo area and then unrelated text links in a section below it. I want one of the unrelated links to link to b.html section 5 of b.html's scrollTo instead of just going to b.html and then having to click again to get to section 5.

I have no idea on how to make it work. Can you please give some direction on this?

Thank you so much for this amazing code! A brief question: is there a way to scroll "just enough" so that an element becomes visible?

Suppose I have a list of rows in a table and that this table sites resides within an overflowed div. There are many rows, so only a few rows are visible at a time.

Now my goal is that the user can move down the table in a gradual, "non-jumpy" way. If the next row the user wants to see is not visible, I want to scroll *just enough* for it to becomes visible -- rather than have scroll so much that the scrolled-to row is now at the top of the div.

Is there a way to achieve this? I couldn't find a setting that controls this.

First of all, thanks for the great plugin, it was very useful for a number of my projects.

I am now trying to combine it with an accordion structure (where one block expands after clicking on it, and another contracts), but scrollTo doesn't scroll to the right location in this case.

Here is a demo: http://www.pelmeshkin.com/temp/scrolltoaccoridon/

I guess, this is due to location being calculated before the expand/contract animation happens, but even when I try to pause and wait until the animation is over and only then scroll, it still behaves the same :(

Would you have an idea on how to solve this? Perhaps, it could be done with scrolling first and then initiating exanding/conracting animation via callback, but I do not know how can I pass this object to the callback, which, I guess, is a more general jQuery question, but anyway.

1) In FF I cannot seem to remove that left padding in the ul.image_elements, any tips?

2) Click scroll_right once to the end of the ul.image_elements, then click say 3 more times. Now click scroll_left once. There is a additional delay but then the elements scroll. The more times you click beyond the end of the elements the longer the delay. What did I do?

@pelmeshkinYou need to call scrollTo either within a callback provided to the accordion plugin (if possible) and else use a setTimeout to delay the scroll a bit.

@EmlynThe second call to scrollTo will take effect only after the first ended. That's how jQuery animations work. You should start by changing the order.

@AdrianNot sure about the padding, surely a css thing.About the other thing, seems the scrollLeft property keeps going up beyond the limit. You should use another approach, other than relative animations.

Yeah, I've already found a way around this by first finding initial coordinates of the elements I'm going to scroll to, putting them into an array, and then supplying these coordinates to ScrollTo instead of element id.

The only drawback is if the user changes the text size, then the coordinates will need to be updated again.

Ariel - your script is simply lovely and smooth. I have a site where I see your script as a better alternative to use than Spry Sliding Panels, but I'm having a problem with overflow.

If you look here: www.bicklerlab.com, you'll see the sliding effect. This is Spry instead of ScrollTo. I'd rather use your script, in addition to using other Jquery ideas, but my attempts fail because adding overflow:auto; to the scrolling panes causes very jagged scrolling in Firefox. The Spry js file adds a CSS element dynamically to hide the overflow:auto temporarily until scrolling stops. I've looked through your files and the comments, and I apologize if I've missed it, but can the scrolling panes have an overflow:auto property that is hidden during scrolling?

That's not a built-in feature (and won't be).You can do that from the outside though, pretty easily.Each time you trigger a scroll, change the css overflow to hidden, then within scrollTo's callback, put back on auto.

Awesome to know a solution is possible. Forgive me, though, as I'm much better with CSS than JS. And by 'much better' I mean I know next to nothing about writing JS. Can you give an example of how I'd add this on the 'outside'? Presumably some internal javascript in the head of the page I'm using Scroll?

Hi Ariel - Thank you for the js code to insert. I want to show you where I've posted it in hopes of discovering where I went wrong.

This page (http://cms-collaborative.com/pre-publish/profile.html) uses the scrolling. If you click "Origins", you'll see the panel with scrollbar. If you click Scope of Services, and click any of the sub-navigation elements under that, you'll see during horizontal scrolling the jagged appearance (that occurs in Firefox).

The js code you provided I placed in the core2.js file. And the CSS you gave, I renamed to ".panelscrolling", which is in the cms_styles-2.css file. As for the panel, it's a list-item called .section .sub (specifically, a list-item within '.section' that has the class ".sub"). I'm pretty certain I have not done the js code correctly in "core2.js". Are you able to point me in the right direction? And I definitely appreciate this all - localScroll (and scrollTo) are such terrific scripts. Seriously well done.

@MichaelYeah it's ugly. Not sure why it happens, probably bad browser's redrawing, not much to do except simplify the CSS.There's a ton of floated elements, that makes it harder to redraw.Sorry I can't help you more :(

Brilliant script. I`m totally new to js, but am trying to figure it out.

Probably a stupid question, but I was wondering if divs could be used with ScrollTo, instead of (or with) the lists.

I know localScroll and serialScroll go left/right and up/down, and they use divs to seperate the content area's, but ScrollTo does left/right/up/down and would be nice to have it move around to seperate divs within the pane, without being constrained by having to put a whole bunch of images and content within lists.

Hi ArielI am newbie in jQuery and ScrollTo.Now, I meet some problem in use ScrollTo, When I am implementing code with ScrollTo, ex. $('#id').scrollTo(); this code include in file.js but it's not working. I don't know What happen?. Can you help me to solving this problem.Thank you.

THANKS for all your work on this. I can't say that enough. Quick question, I am getting a small "flash" in Fire Fox each time I click on the link. Not happening in Safari or IE. I am implementing the script exactly like your demo (which I notice it doesn't happen in). Only thing different would be our CSS layout. Any thoughts?