Ariel Flesler: jQuery.ScrollTo 1.4.2 released

Monday, May 25, 2009

jQuery.ScrollTo 1.4.2 released

Notice

I've pretty much stopped updating this blog, but the plugin development is still on-going. You can find the link to the Github project page at the bottom of the article.

Fixes

Fixing max calculations for regular DOM elements.

Features

The plugin support percentages as target ('50%' or {top:'50%', left:'45%'}).
Exposed the max() calculation as $.scrollTo.max.

Enhancements

Renamed $.fn.scrollable to $.fn._scrollable to avoid conflicts with other plugins.

243 comments:

«Oldest ‹Older 1 – 200 of 243 Newer› Newest»

aiwazz said...: 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?

testpage:

http://64.15.138.52/~funck/prototype6/index.php

using this version and localscroll 1.2.7

and the function (i am no java freak, just getting started)

jQuery(function( $ ){
$.localScroll.defaults.axis = 'xy';
$('#navigation').localScroll({
target: '#container',
duration:1000,
onBefore:function( e, anchor, $target ){
},
onAfter:function( anchor, settings ){
}
});
});; May 26, 2009 at 1:09 AM
Ariel Flesler said...: Hi Aiwazz
That looks odd! browsers suck at redrawing. You'll need to try playing with the css, it'll probably work faster without the absolute positioning (just guessing).

If nothing works, you could opt for using the 'queue' setting.; May 26, 2009 at 10:17 AM
aiwazz said...: Thanks Ariel! I did so last night (queue:true) and got everything smooth in all browsers... I'll play around with dif scroll methods/css though to find the culprit. What a great script, thanks again!; May 26, 2009 at 1:10 PM
Ariel Flesler said...: You need to return false to avoid the default behavior.; June 3, 2009 at 7:07 PM
aiwazz said...: Just wanted to say thanks for helping me with that Ariel. I know bearing with java dorks like me for people at your level must be a bore but I appreciate it immensely!; June 4, 2009 at 9:48 PM
Unknown said...: Hi Ariel.. Got the mousewheel implemented. Pretty awesome. Thanks so much..; June 5, 2009 at 3:09 PM
Ariel Flesler said...: @aiwazz
You're welcome :)

@Arthur
Glad it worked!; June 5, 2009 at 8:55 PM
Chris said...: Is there any method to using this plugin with newly created DOM elements (after page load)?; June 10, 2009 at 3:19 AM
Kapil Israni said...: Hi Ariel,

This is really awesome stuff, very good job.

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??

Your comments would really be appreciated. Thanks again.; June 11, 2009 at 1:26 PM
Ariel Flesler said...: @Synd
The plugin works for new elements (scrollTo). If you mean localScroll or serialScroll, then there's a setting called "lazy" for that.

@Kapil
It's hard to tell without a demo.; June 11, 2009 at 1:39 PM
Emlyn said...: ScrollTo in action: www.dishplay.com

So-so design, great plugin. Tx :); June 12, 2009 at 10:46 AM
Ariel Flesler said...: Pretty cool Emlyn :); June 12, 2009 at 10:58 AM
noblends said...: Ariel,

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(){

$.scrollTo("+="+$aCertainAmountToGetToTheNextItem+"")

}

Thanks.; June 16, 2009 at 12:20 PM
Ariel Flesler said...: Maybe something like this:

var $elem = $(...);
var current = $elem.scrollTop();
var max = $.scrollTo.max(
$elem[0], 'y'
);

if (current == max)
....; June 16, 2009 at 2:19 PM
Catherine said...: 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.

I've loaded my test page on my sandbox: http://www.azzcatdesign.com/azzcatdevelopment/Dovetail@Azzcat/indexAlt.html; June 25, 2009 at 4:53 PM
itte said...: This is exactly what I needed today. Tku tons for developing this. Your demos are really clear and a great resource as well.; June 26, 2009 at 3:19 PM
Web Design Mumbai said...: this is such a brilliant script. some time back i saw a site that used this script to great effect.; July 1, 2009 at 1:23 PM
Lars Corneliussen said...: How do you create the min-versions? I want to create some for my plugin http://startbigthinksmall.wordpress.com/2009/05/28/beautyofcode-jquery-plugin-for-syntax-highlighter-2-0-by-alex-gorbatchev/; July 17, 2009 at 7:08 AM
Ariel Flesler said...: @Lars
I used to do hand-made minification using Dean's Packer, it was a bit tedious.
I now use the YUI compressor and run it using the command line (the Makefile's in there).

Now that it is automated, it's so much nicer.; July 17, 2009 at 1:17 PM
John said...: Hey Ariel, Thanks for addding the scrolling limit, that came in handy.; July 27, 2009 at 4:38 PM
Unknown said...: 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.

Any ideas?

Sorry if this is an obvious question, I'm still learning :D

Thanks!; July 27, 2009 at 5:08 PM
EyeCoder said...: 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?

Thank You; July 29, 2009 at 10:48 PM
Ariel Flesler said...: @Ben
I'll see what I can do about it once I'm a little more free.

@eyeCoder
Got a demo online ? if you kept the scrollbars, they're known to bust the animation in firefox.; July 31, 2009 at 9:18 AM
Adrian said...: Please, cand you show me (us) an simple example, make me understand more fast and easy?
The demo has a huge source!

I`d like to see how do i scrool in an div with width 3000px at his middle orizonatly; August 9, 2009 at 3:24 PM
Ariel Flesler said...: Hi
ScrollTo's demo is meant to show all the settings you can use.
To scroll a div to the middle do this:

$('#the_div').scrollTo('50%',900, {axis:'x'});

That's the basic.; August 10, 2009 at 9:26 AM
nomados said...: 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.

Thanks for all your hard work.
Damon; August 19, 2009 at 2:59 AM
Murtaza said...: 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; August 19, 2009 at 5:56 AM
Matt said...: 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?

Thanks :); August 19, 2009 at 7:53 AM
Ariel Flesler said...: @Nomados
Ok, 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.

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

@Matt
If 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.; August 19, 2009 at 10:58 AM
nomados said...: 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.

Thanks again for your time

Hope that is clearer.; August 19, 2009 at 12:09 PM
beerbelly said...: @nomados:

just use this:
$( document ).ready( function() {
$( '#yourContainer' ).scrollTo("#center", 500 );
} );

I have a different question though. Can you scroll to different DIVs in such a way that they would be centered on the page?

Example: http://www.kreatorij.si/themes/scroll/

I'd like the grey boxes to show in the center of the screen.

Thanks for the help.; August 21, 2009 at 6:58 AM
nomados said...: @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.

Thanks for your time,
Damon; August 21, 2009 at 1:39 PM
nomados said...: I got it, was calling wrong container.

Thanks for your help.
d; August 21, 2009 at 4:41 PM
Touretti said...: hi there.

is it possible to scroll the body 100px to the right each time on a click on a certain id?

know what i mean? not scrolling to a fix coordinate or anchor...

thanks and kind regards,
m.; August 21, 2009 at 8:48 PM
beerbelly said...: @nomados: glad I could help

anyone have a suggestion towards my problem?; August 24, 2009 at 4:04 AM
Flip said...: 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'); });

(hope it's not something simple i just haven't notice..ehehe); August 24, 2009 at 10:34 PM
Ariel Flesler said...: @Bostjan
You seem to have figured it out ?

@Flip
So 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 :); August 27, 2009 at 9:40 PM
bscphoto said...: 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. Text
When 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!!!; September 3, 2009 at 9:47 PM
bscphoto said...: ok.. sorry.

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; September 3, 2009 at 10:11 PM
Ariel Flesler said...: Hi
It'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?).; September 3, 2009 at 10:37 PM
bscphoto said...: 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; September 3, 2009 at 10:55 PM
bscphoto said...: this is weird. I uploaded localScroll (not minified) to my lcoal computer and linked it to my index.html using dreamweaver and its saying that there is a synax error on line one of locaLscroll.js; September 3, 2009 at 11:01 PM
Ariel Flesler said...: Where can I see this ? (let's move on to emails); September 3, 2009 at 11:05 PM
bscphoto said...: Just wanted to post a big giant THANK YOU for the help you gave last night. My website will now be functioning the way i envisioned and all SHOULD be well.. thanks So much..

now to head over to the donations area...; September 4, 2009 at 12:34 PM
BSC Photo said...: 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

You can see here:
http://design.bscphoto.com/#panel-3; September 6, 2009 at 5:25 PM
shunting said...: Here is a hack to get scrollTo out of the way of Drupal sticky headers:

When you're scrolling up, use the relative syntax. Ugly, but workable:

if (up == 1) {
$.scrollTo(’-=100px’, {
axis: "y",
onAfter: function(){
}
});
}
});; September 10, 2009 at 3:47 PM
Karega McCoy said...: Hello Ariel I am attempting to use scrollTo() I am simply doing this...

jQuery('.navto').bind('click', function() {
$.scrollTo(jQuery(this).attr('rel'));
return false;
});

This does not work. All the page does is jump and scroll bars appear then nothing.; September 10, 2009 at 8:54 PM
Ariel Flesler said...: @Karega
Are you doing this within a document.ready ? if you can't solve it, try to get me a demo so I can see.; September 10, 2009 at 9:38 PM
Gary F said...: Good plugin, thank you. I'm so pleased it works on so many browsers.; October 7, 2009 at 10:49 AM
Anonymous said...: Showing off my implementation:
http://solutionarts.net; October 7, 2009 at 8:55 PM
Pocky said...: Thanks for the great plugin.

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/; October 26, 2009 at 8:53 PM
Ariel Flesler said...: @Pocky
For some reason, your demo seems to be 404 for me :(; October 28, 2009 at 8:55 PM
Pocky said...: @Ariel Flesler

Thanks for reading my question. I"ll post my relevant javascript below. But my link works if you copy and paste it. Here's the link again:

test page

Relevant javascript:

$(document).ready(function() {

var $paneTarget = $('#screen');

$('#logo-home').click(function(){
$paneTarget.stop().scrollTo( 0 , 0, {duration: 1200, easing: 'swing'} );

});

$('#mainnav li#button-home').click(function(){
$paneTarget.stop().scrollTo( 0 , 0, {duration: 1200, easing: 'swing'} );

});

$('#mainnav li#button-films').click(function(){
$paneTarget.stop().scrollTo( 0 , 1600, {duration: 1200, easing: 'swing'} );

});
$('#mainnav li#button-links').click(function(){
$paneTarget.stop().scrollTo( 0 , 3200, {duration: 1200, easing: 'swing'} );

});
$('#mainnav li#button-press').click(function(){
$paneTarget.stop().scrollTo( 3200 , 0, {duration: 1200, easing: 'swing', queue: 'true', axis: 'yx'} );

});
$('#mainnav li#button-blog').click(function(){
$paneTarget.stop().scrollTo( 1200 , 1600, {duration: 1200, easing: 'swing'} );

});

});

Original question:

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.

Thanks again!; October 28, 2009 at 9:04 PM
Ariel Flesler said...: @Pocky
You'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.; October 28, 2009 at 9:11 PM
Bolo said...: What happened to my question?; October 29, 2009 at 3:24 PM
Ariel Flesler said...: I delete support requests when I take too long to reply, assuming most people just solved it in some other way. In order to keep this comment list readable.

Feel free to send me an email with your problem and I'll check that asap.; October 29, 2009 at 3:54 PM
Luigi "the Hunter" De Frenza said...: This comment has been removed by the author.; November 5, 2009 at 6:47 PM
Luigi "the Hunter" De Frenza said...: it's possible to nidify a scroll box inside another scroll box?
how to do this?
thanks; November 5, 2009 at 6:48 PM
Chad said...: 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

$('#scroll-auth').mousewheel(function(event, delta) {
if (delta > 0)
log('#test2: up ('+delta+')');
else if (delta < 0)
log('#test2: down ('+delta+')');
return false; // prevent default
});

but it doesn't scroll.; November 9, 2009 at 1:12 AM
RomanP said...: Ariel - Fantastic plug in! Hello single page design with easy maintenance.

I'm having troubles understanding how to specify which #anchor gets shown when the page loads (Section 3b for example, instead of 1a).

I added Bostjan's code to the init.js file but I'm not getting anywhere...

$( document ).ready( function() {
$( '#content' ).scrollTo("#section3b", 500 );
} );

(#content is my viewer div)

Thanks for any help; November 13, 2009 at 3:54 PM
jbennett said...: I can't seem to get this to work in firefox. Works great in IE. Is there something i'm missing? I'm new to javascript so...; November 16, 2009 at 7:18 AM
moyger said...: hi i created a site using this plugin....http://www.deziocreative.com. All is doing well except for IE8. When I clicked on a button it always starts on the homepage. I need help anyone. please; November 18, 2009 at 3:39 AM
Unknown said...: Hi Ariel,

Many thanks for your effort.

I can't get it to work right tho.

I want the window to scroll horizontal to the middle of div, so the div is always in the middle of the view.
regardless of the resolution.

Here is my setup:
http://dc.michaytsma.nl/

Here is what i want to achieve:
http://www.gavincastleton.com/

It also doensn't work on IE, even with height&width set on the containers.; November 20, 2009 at 12:36 PM
Bob Black said...: I wanted to have scrollTo center the element (as did Bostjan?) I think I figured out a reasonable way to do it.

I added a 'center' option to scrollTo with the below code. I put it in the this._scrollable().each() loop in $.fn.scrollTo()

The line # is 155 in scrollTo() 1.4.2

--CODE--
if (settings.center) {
// Center in the scroll target
var dimKey = axis== 'x' ? 'width' : 'height';
attr[key] -= ($elem[dimKey]() - targ[dimKey]()) / 2;
}
-- END CODE--; November 24, 2009 at 9:07 AM
Unknown said...: 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; November 26, 2009 at 6:51 AM
dawbs said...: 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.

Thanks again; November 26, 2009 at 9:29 PM
Unknown said...: Hi,

Thanks for the script!

I want to make use of the UL/LI menu to link to another HTML file (doesn't use the scrollto script), but it won't let me, what do I need to do to override this?; November 26, 2009 at 11:53 PM
BeefKing said...: Great script! So many ways to give it information, and then it "just goes". Excellent.

But there is one way to enter the destination which I miss.

Instead of giving it a string, such as '+=400' is there a way to feed it a variable for that string?

That is:

var shift = 400;
var dest = "+="+shift;
$.scrollto(dest....)

?

Thanks!; December 2, 2009 at 8:18 AM
msdevouted said...: hellow, i don't understand why it doesent scrool back under ie, it works fine only on firefox, other browsers has some problem with scroling list

you can see at http://motywy.com.pl

plese help; December 7, 2009 at 1:24 PM
Pieter Boekhoff said...: Thanks for the post! This is my scrollTo creation that came of me reading your article:

www.fenturesolutions.com

Hope you like it
Thanks again!

Pieter; December 10, 2009 at 7:02 PM
AshCharlton said...: Hi

Im new to javascript, and I am trying to get ScrollTo to work but I cannot get it to work.

Here is the code i have so far, can anyone tell me where i am going wrong.

http://pastebin.com/m213c3ce2; December 11, 2009 at 11:28 PM
Unknown said...: 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?; December 17, 2009 at 8:18 PM
Unknown said...: Ah, forgot my test page is at http://www.ofthejungle.com/testaccordion.php; December 17, 2009 at 8:22 PM
munique-design said...: Hey Ariel,

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.html
I 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; December 21, 2009 at 11:35 AM
Anonymous said...: 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?; December 29, 2009 at 2:24 PM
Pieter Boekhoff said...: I found the same thing with my implementation.

www.fenturesolutions.com

works fine in fireFox, Chrome, Safari, but not in IE. I'm not sure if there is a solution out there, I didn't search very hard.; December 29, 2009 at 2:49 PM
mcgyver47 said...: Hi
First thanks for a nice plugin
It works nicely clicking on a link as described in demo but
I am trying to use it as below:
user clicks on a radio button called input#oui
jQuery('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-top
Unfortunatly I have just started learning jQuery and have not succeded so far !
Thanks for help; January 2, 2010 at 11:49 AM
Anonymous said...: 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.

Here' a sample of the code:
(div id="content")
(div class="section")
(ul class="gallery clearfix")
(li class="sub" id="section1")
(a href="images1/lrg1.jpg" rel="prettyPhoto[gallery1]" title="For more info about the products on this page Call us at 800.555.1212")
(img src="images1/metro1.jpg" alt="Metro 1" /)
(/a)
(a href="#section1b" class="next">Next(/a)
(h2)Metro 1 ( 1 of 24 )(/h2)
(/li)
(/ul)
(/div); January 4, 2010 at 11:25 PM
Anonymous said...: Thanks for a great plugin. Is there anything that can be done to make this work with Opera? A Simple scroll with jquery.scrollTo-1.4.2-min.js

jQuery(window).load(function() {
jQuery.scrollTo('a.[name='something']',100, {axis: "y", offset: -20});
});

does not do anything in Opera, but Chrome, Safari, IE and FF work well.; January 18, 2010 at 7:58 PM
Anonymous said...: Hi Ariel and thank you for the good article.

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/

Thank you in advance.

Regards
Kristian; February 1, 2010 at 9:29 AM
Anonymous said...: 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).

Can anyone please help me, I'm really struggling with it.

Thanks!; February 5, 2010 at 6:05 PM
Michael Schouman said...: Hi there,

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?)

Thanks in advance for the information :-); February 7, 2010 at 2:03 PM
Unknown said...: 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.

a href="#" onclick="scrollToEntry('div name here')">1</a; March 17, 2010 at 2:24 PM
chadedge said...: Ariel, I'm loving the smooth scrolling that "scrollTo" allows, however, I'm having an issue with the scrollTo plugin on the iPhone:

http://www.chadedge.com/wordpress/2010/03/18/a-problem-with-jquery-plugin-scrollto/

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.

Any ideas?; March 18, 2010 at 6:05 PM
Unknown said...: dear ariel,
very nice tool thanks. the demo page throws js warnings e.g.:

Warnung: reference to undefined property b.onAfter

Quelldatei: http://demos.flesler.com/jquery/scrollTo/js/jquery.scrollTo-min.js
Zeile: 11; March 23, 2010 at 6:25 AM
Carl M. Gregory said...: Kept getting an error stating 'Cannot read property 'slice' of undefined'.

After tracking that down, seems it will throw the error if you request it to scroll to a selector that doesn't exist.

Problem resolved by replacing
if(b=="max")b=9E9;

with this
if(b=="max")b=9E9;else if(jQuery(b).length==0)return;; March 24, 2010 at 12:24 PM
blustrps said...: I am working on a project that is working great across browsers here (styles unfinished): http://sisuhome.com/new/cycle/

But when I add more links to the nav, it doesn't work in Safari: http://sisuhome.com/new/cycle2/

Instead, it just 'jumps' to the div id, instead of scrolling nicely (works in FF though).

I updated the CSS and JS file.; March 26, 2010 at 5:44 AM
blustrps said...: Follow up: Actually, this (http://sisuhome.com/new/cycle2/) is working fine across browsers but it's not working locally in Safari - very strange.

Instead of the page scrolling nicely up and down, it jumps to each anchor.

Any idea why this would be happening?

An earlier version (http://sisuhome.com/new/cycle) works fine locally...; March 26, 2010 at 4:56 PM
Unknown said...: Why the heck doesn't this work in Webkit (Chrome, Safari) browsers:

$.localScroll();

or

$('#nav a').click(function() {$('body).scrollTo($(this).attr('href'), {duration : 750});
return false;})

but somehow this does work in safari/chrome:
$('body).scrollTo('#link1'), {duration : 750});

Works fine in Firefox.

scrollTo and localscroll plugins are included of course.

Markup:
[ul id="nav"][li][a href="#link1"]link 1[/a] .. etc ...[/ul]

[div id="link1"]...[/div] ... etc ...

Please help!; March 31, 2010 at 5:11 AM
SFsthetik said...: Hi Ariel,

I'm trying to modify your great scrollTo scripts - I want to have text/html along with the image and so far it seems that doesn't work?

Any suggestions would be greatly appreciated.

regards,

Mark
mark.e.gould@gmail.com; April 8, 2010 at 11:09 PM
Alyson said...: I'm really confused...where do you specify the $(...).scrollTo( target, duration, settings ); parameters??; April 19, 2010 at 7:50 AM
totallytotallyamazing said...: Hi Ariel,
1st THANK YOU for this totallytotallyamazing plug-in!!!

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!!!
Derek

Link:
http://totallytotallyamazing.com

3 JS functions in html HEAD:

function scrollToAbout(){
$(window).scrollTo( {top:'2073px', left:'0px'}, 800 );
}
function scrollToPortfolio(){
$(window).scrollTo( {top:'0px', left:'0px'}, 800 );
}
function scrollToContact(){
$(window).scrollTo( {top:'2779px', left:'0px'}, 800 );
}

Accessing these jquery libraries:
jquery.js
jquery.scrollTo-min.js

The AS3 code from the Flash AS3 buttons:

import flash.external.ExternalInterface;

about.buttonMode = true;
about.mouseChildren = false;
about.addEventListener(MouseEvent.MOUSE_OVER, aboutOver);
about.addEventListener(MouseEvent.MOUSE_OUT, aboutOut);
about.addEventListener(MouseEvent.CLICK, aboutClickHandler);

function aboutOver(event:MouseEvent)
{
about.gotoAndPlay("overAbout");
};

function aboutOut(event:MouseEvent)
{
about.gotoAndPlay("outAbout");
};

function aboutClickHandler(event:MouseEvent):void
{
ExternalInterface.call("scrollToAbout");
};

portfolio.buttonMode = true;
portfolio.mouseChildren = false;
portfolio.addEventListener(MouseEvent.MOUSE_OVER, portfolioOver);
portfolio.addEventListener(MouseEvent.MOUSE_OUT, portfolioOut);
portfolio.addEventListener(MouseEvent.CLICK, portfolioClickHandler);

function portfolioOver(event:MouseEvent)
{
portfolio.gotoAndPlay("overPortfolio");
};

function portfolioOut(event:MouseEvent)
{
portfolio.gotoAndPlay("outPortfolio");
};

function portfolioClickHandler(event:MouseEvent):void
{
ExternalInterface.call("scrollToPortfolio");
};

contact.buttonMode = true;
contact.mouseChildren = false;
contact.addEventListener(MouseEvent.MOUSE_OVER, contactOver);
contact.addEventListener(MouseEvent.MOUSE_OUT, contactOut);
contact.addEventListener(MouseEvent.CLICK, contactClickHandler);

function contactOver(event:MouseEvent)
{
contact.gotoAndPlay("overContact");
};

function contactOut(event:MouseEvent)
{
contact.gotoAndPlay("outContact");
};

function contactClickHandler(event:MouseEvent):void
{
ExternalInterface.call("scrollToContact");
};; April 20, 2010 at 5:33 PM
Pater said...: Here some changes I've made to source code to make scrollTo work on my page.

144 ... if( toff ){// jQuery / DOMElement
145 --- attr[key] = toff[pos] + ( win ? 0 : old - $elem.offset()[pos] );
145 +++ attr[key] = (toff[pos] - toff[key]) + ( win ? 0 : old - $elem.offset()[pos] );
147 ... // If it's a dom element, reduce the margin

199 ... if( !$(elem).is('html,body') )
200 --- return elem[scroll] - $(elem)[Dim.toLowerCase()]();
200 +++ return elem[scroll] - parseInt($(elem)[Dim.toLowerCase()]());
202 ... var size = 'client' + Dim,

... line with no changes
--- old line
+++ new line

Plugin won't worked without this changes; April 22, 2010 at 7:50 AM
aamirafridi.com said...: I am using scrollto/localscroll with jquery tabs.

Actually i have a div where i add jquery ui tabs and when there are many tabs, i show arrows so user can navigate through different tabs.

I manage to do so but the tabs lose their event i.e. when u apply this plugin to tabs, clicking each tab do nothing.

is there any link where i can find a demo or something?

i want an effect like http://www.extjs.com/deploy/dev/examples/tabs/tabs-adv.html in jquery. plz help; April 22, 2010 at 2:20 PM
Unknown said...: I am having trouble getting this to work properly. Please see the script on this page:

www.etviscenter.com/test

I realize that the script has scrollTo rather than $.scrollTo. Without the $ I can get the screen to jump to the proper position. It just does not tween properly.

Any advice?

Thanks.; April 29, 2010 at 4:17 PM
aamirafridi.com said...: Just finished working on jQuery scrollable tabs using your scrollTo plugin :)
http://www.query.aamirafridi.com/jst; May 6, 2010 at 11:04 AM
Anonymous said...: 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!; May 19, 2010 at 12:19 PM
totallytotallyamazing said...: RE-POSTED From the CodeProject:

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 in
your code, and the css associated with that DOM node disappears.

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

totallytotallyamazing
Permalink
Posted 27 Apr '10 3:57 PM
totallytotallyamazing
Rep: 20 (328); May 19, 2010 at 1:17 PM
Deep said...: Is it possible to set the initial position of the scroll area on load of the page? I want my scroll area to begin in the middle basically not the top left.; May 20, 2010 at 1:56 PM
Pieter Boekhoff said...: I did it on our site. Check the code to see how. www.fenturesolutins.com

Pieter; May 20, 2010 at 2:07 PM
Deep said...: Hi Peiter

Thanks for the sample. One more question I notice how your moves after the page load. Can it be set to move a certain amount of seconds or time after the load?; May 20, 2010 at 3:32 PM
Pieter Boekhoff said...: script type="text/javascript"
jQuery(window).load(function() {
jQuery('#loading').hide();
});
script

This shows(it's already visible) the loading image until the page loads, then hides it.

script type="text/javascript"
window.onload = function() { $('div.scroller').scrollTo('div.Home', 3000, { easing: 'elasout' }); return false; }
script

This scrolls to the middle div after the page loads. The load takes time because my page is pretty heavy, but if you want to have a delay you can use the setTimeout() javascript method; May 20, 2010 at 4:13 PM
Unknown said...: To stop the scroll if some other link was clicked edit the funktion "animate" into this:

function animate( callback ){
$elem.stop().animate( attr, duration, settings.easing, callback && function(){
callback.call(this, target, settings);
});
};

(sorry for my bad english :) ); May 21, 2010 at 2:39 PM
Jim said...: 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.; June 7, 2010 at 6:52 PM
Anonymous said...: Hi,

Thanks for sharing your script for free.

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).

What do you think?; June 16, 2010 at 12:53 PM
MightyTechy said...: Hi,

Thanks so much for the great work. It works fine. However i need to scroll two things at a time.

1. Banners (total 5)
2. Numbers (i.e. 1/5 , 2/5 .. 5/5)

As banners scroll i also need to scroll or increase the respective numbers.

Is it possible? Also i am not able to control the "wait time / scroll time" between two scrolls.

Thanks,
Kush
www.playonlinebingogame.com; July 2, 2010 at 10:23 AM
thorn said...: There is JS error if the target of scrollTo is a jQuery object with zero elements. Please, fix. Example:

$('#my_element').scrollTo('#some_inexisting_element');; July 17, 2010 at 8:59 PM
Anonymous said...: Hi. I'm very new to jQuery and js.

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?

Thanks,

Todd; July 19, 2010 at 2:36 PM
Michael Botsko said...: I'm using this script as part of another project currently using jquery 1.3.2. When I replace that with jquery 1.4.2 (current release), scrollto 1.4.2 stops working, without any errors.; July 20, 2010 at 2:26 PM
Unknown said...: 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'

(Sorry, your comments parser does not allow me to attach a code sample here..)

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

var row = jQuery("#<=grdviewSearchResults.ClientID%> tr").eq(ii); //Select the GridView row

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.

Works like a charm!! Thanks again.; July 22, 2010 at 12:33 PM
Unknown said...: 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

thank you!!; July 22, 2010 at 1:26 PM
wkf said...: This looks pretty good. I have a question. I want to use LocalScroll on a page that also uses an jQuery-UI Accordion. If the users clicks a local anchor two things need to be done:

#1: The target may reside in another section of the accordion so that must be activated.

#2. The page must scroll to the anchors target.

Could I use the onBefore function to open the corect section of the accordion or is there some other way to achive this.

Thanks for your input,

Fred!; July 23, 2010 at 9:46 AM
Commandrea (Andrea Afra) said...: 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.
12
34

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.

Horrid little representation, I'm sorry-- your help is greatly/desperately appreciated!; July 26, 2010 at 5:53 PM
Unknown said...: 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!; July 29, 2010 at 2:29 PM
professor44 said...: Great plugin, it's very intuitive.

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.

Thougths?; August 4, 2010 at 12:10 PM
Dimitri said...: 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?; August 17, 2010 at 5:43 PM
B-Designed said...: 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?; August 23, 2010 at 3:53 PM
B-Designed said...: Here's the link concerning my question above. I forgot to attach it.

http://parachoo.com/portfolio/index.php; August 23, 2010 at 4:05 PM
RLIC said...: Hi, I've been looking for something like this for ages now and am thrilled to have found this place, but I can't seem to get scrollTo to work.

If I'm not wrong, it works as a click-and-scroll thing the code I tried was this;

$('#link_div').click(function(){
$.scrollTo('#target_div');
});

This doesn't seem to work though. I'd really appreciate any help you can give me.; August 24, 2010 at 9:56 AM
RLIC said...: And as for LocalScroll, it seems to work fine in Firefox but does nothing in Safari. Is there a way around this? Thanks.; August 24, 2010 at 11:05 AM
Onema said...: 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.

Using Firefox 3.6.8 on mac os 10.6.3; August 25, 2010 at 7:31 PM
eamonn said...: 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.

Can you help me?; August 28, 2010 at 5:22 PM
RLIC said...: Can anyone post the basic codes for a simple scroll consisting of a link and a local same-page target? Just so I get how this plugin actually functions. I'd really appreciate it.; August 29, 2010 at 9:05 AM
RLIC said...: Sorry I'm posting so much, but I just wanted to say that I've gotten LocalScroll to work in Safari after updating jQ to 1.4.2. ScrollTo on the other hand, still isn't working for me :[; August 29, 2010 at 9:22 AM
hadhadhad said...: Shouldn't I be able to scroll a image around?

DEMO; September 16, 2010 at 7:38 AM
hadhadhad said...: AND.. rlic

could you post your sample?; September 16, 2010 at 8:12 AM
chocochoco said...: I seem to be having a small problem with ie. (works in opera)

the call is:
$("#resultscontent").scrollTo(myanchor, 800);

which is part of a load function

$(output).load(thishrefcontent, function () {$("#resultscontent").scrollTo(myanchor, 800);});

when myanchor is a number it works. But if myanchor is an anchor, like
myanchor = 'div#longphilosophy';
(where div#longphilosophy is a place in thishrefcontent..)

in ie it goes to the top, not to the anchor.

I know you say something in your troubleshooting section about making div's fixed, but it wasnt quite clear what you meant. could you explain, if it pertains...; September 24, 2010 at 9:29 PM
GamerZorg! said...: Hi, thanks for the short example. After searching on so many jquery plugins, this one is the real help for me.; September 26, 2010 at 2:51 AM
Unknown said...: 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.

Hardy

$(document).ready(function() {

//get all link with class panel
$('a.menu-frame-button').click(function () {

//reset and highlight the clicked link
$('a.menu-frame-button').removeClass('selected');
$(this).addClass('selected');

//grab the current item, to be used in resize function
current = $(this);

//scroll it to the destination
$('#wrapper').scrollTo($(this).attr('href'),{queue:true,duration:1500});

//cancel the link default behavior
return false;
});

//resize all the items according to the new browser size
$(window).resize(function () {

//call the resizePanel function
resizePanel();
});

});

function resizePanel() {

//get the browser width and height
width = $(window).width();
height = $(window).height();

//get the mask width: width * total of items
mask_width = width * $('.item').length;

//set the dimension
$('#wrapper, .item').css({width: width, height: height});
$('#mask').css({width: mask_width, height: height});

//if the item is displayed incorrectly, set it to the corrent pos
$('#wrapper').scrollTo($('a.selected').attr('href'), 0);

}; September 27, 2010 at 8:10 AM
Unknown said...: This comment has been removed by the author.; September 28, 2010 at 1:04 PM
Unknown said...: Hi Ariel,

First off, great work on scrollTo. It's been a pleasure to use.

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.

Again, Thanks for your quality work.

~Hyszczak ]dot[ net; September 28, 2010 at 1:07 PM
Unknown said...: 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.

Obviously, this is due to my inexperience with this script..; September 29, 2010 at 8:40 AM
Unknown said...: 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?

Thanks a lot!; October 3, 2010 at 6:45 AM
deleteYourslf said...: Hi Ariel,

I am having trouble getting scrollTo to work properly when the srolling object's margin is changed dynamically.

Initially I thought the offset parameter could be used to handle this use case, but it doesn't seem to do what I expected. Any thoughts?; October 12, 2010 at 12:23 PM
Mathijs said...: Hi Ariel, i have a problem with IE7.

It gives the following error:

'f' is null or not an object Line: 11 Char: 1343 Code: 0 URI: http://www.intra-interieur.be/www/js/jquery.scrollTo.js

As you can see, it's an error within the ScrollTo.js. It makes IE7 go crazy. How can i fix this?

Thanks!!; October 17, 2010 at 6:28 AM
Unknown said...: Hi, seems ScrollTo or LocalScroll has problems with jQuery 1.4.3 in IE (tested with version 8). The DIV container doesn't scroll any longer - insead it jumps to his position.; October 17, 2010 at 3:55 PM
Rich said...: Great plugin. I've modified your plugin to support dynamic offsets (needed for an mobile app I'm building -- offsets need to change when orientation changes):

http://gist.github.com/635490; October 19, 2010 at 9:16 PM
Unknown said...: 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.

http://onedayny.com/dailygrind/?p=1601; October 27, 2010 at 9:51 PM
Unknown said...: This comment has been removed by the author.; October 29, 2010 at 2:17 PM
Unknown said...: If I have this:
$('.nav-next').click(function() {
$('.thumb-list-container').scrollTo( $('ul.thumb-list li').next(), '800', { axis:'x'});
});

It will only scroll to the next li on the first click. Shouldn't it do it on each click?; October 29, 2010 at 6:11 PM
Unknown said...: Hello Ariel Flesler! I am glad to contact you. I try to fix a website which use your your plugin, and I would appreciate any help. I have made a demo to explain you the "problem".

The demo page is this: http://valogiannis.com/stackoverflow/scrollto/scrolltoexample.htm

as you can see when the scroll is on the last part (li) it returns "violent" in the first part. The corresponding code for this is in function auto_slide() the function is the following

function auto_slide() {
var current = $('.banner-nav li.active');
var next = current.next();
if (!next || !next.length)
next = $('.banner-nav li:first');

slide(next.find('a').get(0));
if (auto_slide_toggle)
setTimeout(auto_slide, slide_interval);
}

the "next = $('.banner-nav li:first')" returns on the first part. But how can I make it to return without showing the intermediate parts?; November 2, 2010 at 10:40 AM
sander said...: maybe redundant - (sloppy) replacement for animate() to leverage jQuery's queue key to avoid its effects queue:

function animate( callback ){
var options = {
duration: duration,
easing: settings.easing,
complete: callback && function(){
callback.call(this, target, settings);
},
queue: false
};
$elem.animate( attr, options );
};; November 3, 2010 at 5:47 PM
Singhwa said...: Exactly what i was looking for thank you very much for the article. A memorable example of text.Thanks for taking the time to post such a detailed and informative article.
http://www.myhair-loss.com/; November 4, 2010 at 3:29 AM
Unknown said...: Hi, great plugin!

I want to use

$('#the_div').scrollTo('50%',900, {axis:'x'});

but where do I put that bit of code??

Oliver B; November 4, 2010 at 4:09 PM
Unknown said...: 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...; November 7, 2010 at 1:58 AM
David Lindström said...: Hey,

I have a question: is it possible to have a scrollTo link on one page linking to a specific position on another page?

For example, on page A I want to have a link that when clicked takes the user to page B and scrolls down to X amount of pixels.

Kindof like but instead of going to the #about we go to a specific pixel "depth" on that page.

Any help appreciated, cheers!; November 8, 2010 at 12:49 PM
bigorangemachine said...: 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: 161
Error: '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.; November 12, 2010 at 2:07 PM
Anonymous said...: Hi Ariel,

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.

Thank you very much for your work!
Markus; November 17, 2010 at 11:27 PM
DX said...: Is there a way to use a selector + a number of pixels? I need it to scroll a little farther.

For example:
$.scrollTo('#id +300px', 800);; November 26, 2010 at 5:13 AM
el said...: Hi Ariel,

I can't get the ease (or any other animation) to work with ScrollTo. This is my code:

$('a[href=#about]').click(function(){
$('html, body').animate({scrollTop:1000}, 'fast', 'easeout');
return false;
});

I am using the jquery ease 1.3 lib. thanks so much!

Elaine; December 8, 2010 at 7:29 PM
Ian Chandler said...: Hi Ariel

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?

Kind Regards

Ian; December 17, 2010 at 10:15 AM
Mr Kenzo said...: hi, it works but my flickers at the top left hand corner of the window before scrolling? any ideas?; January 5, 2011 at 10:44 AM
Anonymous said...: 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.; January 6, 2011 at 10:20 PM
Jonw said...: Hi,

Great plugin, thanks!

I don't see any way to make it stop at the end of the first iteration. Is there any way to do that? I would prefer it did not start again automatically.

Thanks

Jon; January 12, 2011 at 6:54 PM
Anonymous said...: How can I highlight the link, but remove the highlight if a user scrolls away from the target?

Ive read Hardy's comment on September 27. He applies a style when the link is clicked, but if a user then scrolled away then the link would still be highlighted.

Here is a (non js) demo of what im trying to do:
http://smartpeopletalkfast.co.uk/jump/jumpmenu.html

The links are absolutely positioned and so stay visible.; January 24, 2011 at 6:45 AM
Anonymous said...: 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?

1 2 3 [4] 5 6 7 8; January 26, 2011 at 10:04 AM
Unknown said...: 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.; January 27, 2011 at 10:56 PM
focus97 said...: 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.); January 28, 2011 at 1:26 PM
Unknown said...: 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?; January 31, 2011 at 12:58 PM
Test said...: FYI, I changed line 185 of the jquery.scrollTo-1.4.2.js file to:
$elem.stop(true,false).animate( attr, duration, settings.easing, callback && function(){

-- 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!; February 6, 2011 at 3:42 AM
Unknown said...: Hey,

Will someone please post a very simple example? I really don't know how to make this work and just pieces of code really don't help me at all...please help....; February 14, 2011 at 10:32 AM
Unknown said...: 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.

Thanks.; February 20, 2011 at 4:42 PM
Shannon said...: 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.; February 22, 2011 at 2:58 PM
Unknown said...: Hi Ariel

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 thank you anyway for this fantastic script.

S; March 11, 2011 at 8:18 PM
Unknown said...: I decided to upload a test page. Please ignore all the messy CSS, it's the stripped down version of a work in progress:
http://www.gaelen.co.za/test1; March 11, 2011 at 9:10 PM
Unknown said...: Hey Ariel, thanks for the wonderful script.

I have one question though, is there any way I can have more than 5 items to scroll horizontally?

Everytime I add a sixth item the line brakes in two. Probably because of that item width:20%. But if I change that it messes up the whole page, please check:

http://freekpuppet.com/job_avril_02.html

Thanks a lot!; March 12, 2011 at 3:01 AM
Unknown said...: Ariel. Thanks for sharing your wizardry! Have you or anybody else figure out how to have all scroll areas print to a single page? Any printing hints would be appreciated! Thanks!; March 17, 2011 at 4:47 PM
Unknown said...: This comment has been removed by the author.; March 17, 2011 at 4:48 PM
alemieux3 said...: 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.; March 17, 2011 at 6:46 PM
danny said...: Thanks for this great plugin!
One question: on chrome, when scrolling the whole window:
$.scrollTo("#mydiv")

The window first jumps to the top of the page, and then starts scrolling down to the element. This happens regardless of my position on the page.

Any ideas?; March 24, 2011 at 1:32 PM
Unknown said...: 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.; April 4, 2011 at 7:09 PM
Unknown said...: 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.; April 5, 2011 at 6:03 PM
Unknown said...: 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?; April 8, 2011 at 6:20 PM
Casey said...: Ariel,

How would you use the localScroll to scroll through an iframe that is placed inside of the main page. (but i'm using controls(buttons) from the main page to control the scrolling in the iframe)

Thanks,; April 12, 2011 at 7:35 PM
Eish said...: Hi Ariel,

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.

regards
Eish; April 13, 2011 at 10:43 AM
Neo said...: 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.; April 16, 2011 at 6:30 PM
Unknown said...: This comment has been removed by the author.; April 17, 2011 at 7:01 PM
Unknown said...: This comment has been removed by the author.; April 17, 2011 at 7:12 PM
Unknown said...: This comment has been removed by the author.; April 17, 2011 at 7:15 PM
Unknown said...: 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.

HTML:
<-div id="menuIntersection">
<-div id="menuHome">
home
<-/div>
<-div id="menuAbout">
about
<-/div>
<-/div>

CSS:
div#menuIntersection{
width: 90px;
height: 90px;
position: absolute;
border: 1px solid #F00;
margin-top: 51px;
margin-left: 56px;
overflow: scroll;
}

div#menuHome{
position: absolute;
width: 90px;
height: 90px;
}

div#menuAbout{
position: absolute;
width: 90px;
height: 90px;
margin-left: 90px;
}; April 17, 2011 at 7:17 PM
Derek Leung said...: This is the right plugin that I am looking for. Thanks for the great plugin :); April 17, 2011 at 11:23 PM
register said...: Hi,

How can i detect that the scroll is at his max position?

I have 2 buttons "forward" en "backward" and i want to disable them
when the scroll is at 0 or max (depends on the button).

Did someone has any idea?

Thanks.; April 18, 2011 at 8:19 AM
Kubi said...: Hello, this plugin looks really nice, but how to set it up?

HTML:
...
tr>
td valign="top" colspan="3" style="padding-top: 10px;">
div id="top_banner">

ul class="elements"">
li>img src="http://192.168.1.1/adguru/images/logo.png">/li>
li>img src="http://192.168.1.1/adguru/images/logo.png">/li>
/ul>

/div>
/td>
/tr>
...

CSS:
/* Scrolling top banner*/
#top_banner
{
width: 967px;
overflow: hidden;
position: relative;
}
#top_banner ul.elements
{
width: 2000px;
}
ul.elements li
{
width: 900px;
height: 50px;
float: left;
margin: 0px;
padding: 0px;
list-style: none;
}

JS:
$("ul.elements").scrollTo("+=500");

It doesnt do anything, and I just cant find out why, it looks to me like Im missing something :D...
Could you please help me? :)
Thanks; May 4, 2011 at 7:08 AM
Unknown said...: Hi, I just implement your script and goes really well, thanks.

I used the mask div to hide some content. The only problem that I have, is that I cant put the google analytics script just above the body tag, because always appear inside the main (hero-slider) div.

How can I fix this?

Thanks a lot for your time and for your script.

Regards; May 18, 2011 at 4:36 AM
Eliseu said...: 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.; May 21, 2011 at 2:42 PM
ekroyall said...: This comment has been removed by the author.; May 23, 2011 at 3:08 PM
ekroyall said...: I'm trying to specify the target parameter using a variable. Is this possible? I get "val is undefined" on line 161 of toScroll.js. Thanks!

var scrollToTarget = '#' + (appSections[sectionToLoad].htmlPage).slice(0, appSections[sectionToLoad].htmlPage.indexOf(".html"));
// scrollToTarget = #mysection
$('#content_container').scrollTo(
$(scrollToTarget),
1500,
{axis:'x'}
);; May 23, 2011 at 3:13 PM
Derek Leung said...: Try this:

$('html,body').animate({scrollTop: 500}, 1000, "easeOutBounce");

It does the same thing as this plugin does.; June 7, 2011 at 10:28 PM
NarKuS said...: First off, I've been using this plugin for quite a while now and have always loved it! Looking through the comments I was unable to find an answer to my question, so hopefully this is not a duplicate.

I'm using the $(...).scrollTo() in a standard implementation. I noticed that when you try to interrupt the scrolling effect it jitters until the duration is complete.

I believe it has always done this, however, I'd like to get rid of this minor nuisance. With that, I was wondering if the community or yourself has a solution for this?

I was thinking I could write a handler around the arrow keys and the mouse wheel and then .stop() the animation. I thought I'd ask around to see if there were any other ideas.

Thanks in advance, and thank you for a wonderful plugin!; June 18, 2011 at 9:04 PM
Max Henchman said...: Hello,

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/

Any way of fixing this?

The code i have is:

$(document).ready(function () {

$('li.homeb').click(function() {
$('body,html').scrollTo('#homeinfo', 800, {offset:-180});
});
});; June 23, 2011 at 1:56 PM
Joffrey said...: I had a "jump effect" on safarai and firefox when I click on one of my element. Do you know where is this coming from ?; July 5, 2011 at 4:19 PM
Unknown said...: 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).

Great script by the way. The best one out there.; July 10, 2011 at 11:37 PM
Unknown said...: 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).

Great script by the way. The best one out there.; July 10, 2011 at 11:38 PM
Unknown said...: Hi,

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?; July 13, 2011 at 5:25 PM
Anonymous said...: Hi Ariel -

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?

Thanks,
Patrick; July 19, 2011 at 1:09 PM
Mark Davis said...: 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?; July 19, 2011 at 7:03 PM
Gabriel Buzzi said...: Guy, i don't understand how i put this in my web site, can you show a basic code to me understand?

because i need to use this plugin on the web site and i didn't found another that do the same.

my e-mail:contato@gbvdesigner.com

please try help the most fast you can.

Thanks; July 21, 2011 at 5:28 PM
Scott said...: 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; July 28, 2011 at 11:27 PM
getflourish said...: Not working in current Safari 5.1 – do you know why?; August 23, 2011 at 4:45 PM
skynet said...: Hi Ariel, thanks for this great plugin!
Look, i'm having a issue scrolling the window when this loads.
Here's my code:

$(window).load(function() {
try{
$.scrollTo('.accordion:eq('+qString+')',1500); }catch(e){}
});

This is the url:
http://localhost:8080/website/product/details.html?t=1

p.s. Works fine in Mozilla, IE7/8/9 but not in Chrome...

If you could help this would be wonderful. Thank you!; August 24, 2011 at 7:26 PM

«Oldest ‹Older 1 – 200 of 243 Newer› Newest»

Post a Comment To get help prepare a demo.

Ariel Flesler

Monday, May 25, 2009

jQuery.ScrollTo 1.4.2 released

Notice

Fixes

Features

Enhancements

Links

243 comments:

By Category

Donate to my blog

Recent

Links

Some sites using these scripts

Followers

Ariel Flesler

Monday, May 25, 2009

jQuery.ScrollTo 1.4.2 released

Notice

Fixes

Features

Enhancements

Links

243 comments:

By Category

General

jQuery Plugins

Scripts

Donate to my blog

Recent

Links

Some sites using these scripts

Followers