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.

Links

245 comments:

«Oldest   ‹Older   1 – 200 of 245   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 ){
}
});
});

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.

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!

Ariel Flesler said...

You need to return false to avoid the default behavior.

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!

Arthur said...

Hi Ariel.. Got the mousewheel implemented. Pretty awesome. Thanks so much..

Ariel Flesler said...

@aiwazz
You're welcome :)

@Arthur
Glad it worked!

Synd said...

Is there any method to using this plugin with newly created DOM elements (after page load)?

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.

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.

Emlyn said...

ScrollTo in action: www.dishplay.com

So-so design, great plugin. Tx :)

Ariel Flesler said...

Pretty cool Emlyn :)

Eric Corriel 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.

Ariel Flesler said...

Maybe something like this:

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

if (current == max)
....

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

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.

Web Design Mumbai said...

this is such a brilliant script. some time back i saw a site that used this script to great effect.

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/

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.

John said...

Hey Ariel, Thanks for addding the scrolling limit, that came in handy.

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

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

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.

Web Team 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

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.

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

Test 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

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

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.

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.

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

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

nomados said...

I got it, was calling wrong container.

Thanks for your help.
d

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.

Bostjan said...

@nomados: glad I could help

anyone have a suggestion towards my problem?

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)

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

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

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

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

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

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

Ariel Flesler said...

Where can I see this ? (let's move on to emails)

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

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

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

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.

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.

Gary F said...

Good plugin, thank you. I'm so pleased it works on so many browsers.

damon said...

Showing off my implementation:
http://solutionarts.net

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/

Ariel Flesler said...

@Pocky
For some reason, your demo seems to be 404 for me :(

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!

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.

Bolo said...

What happened to my question?

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.

FasterDix said...
This comment has been removed by the author.
FasterDix said...

it's possible to nidify a scroll box inside another scroll box?
how to do this?
thanks

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.

Chad said...

What an idiot I am - I meant to post that to the mouse wheel page! sorry

Roman 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

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

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

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

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

gtsm 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

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

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

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!

Marcin 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

Pieter 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

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

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

TC said...

Ah, forgot my test page is at http://www.ofthejungle.com/testaccordion.php

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

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?

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

macgyver47 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

Satya said...

Nice post, keepup with the good work, i have subscried to your blog

Celebrities in Avatar getup http://gisnap.com/celebrity/celebrities-in-avatar-getup/

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)

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.

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

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!

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

nahmean 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

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?

Oliver 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

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;

Mark B 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.

Mark B 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...

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

Mark 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

Alyson said...

I'm really confused...where do you specify the $(...).scrollTo( target, duration, settings ); parameters??

Derek 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");
};

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

Aamir Afridi 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

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

aamirafridi.com said...

Just finished working on jQuery scrollable tabs using your scrollTo plugin :)
http://www.query.aamirafridi.com/jst

Jerome Gaynor 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!

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)

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.

Pieter said...

I did it on our site. Check the code to see how. www.fenturesolutins.com

Pieter

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?

Pieter 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

Paul 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 :) )

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.

Мартин 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?

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

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');

Todd 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

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.

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

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

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!

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!

Teruo (Teruo) % 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!

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?

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?

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?

B-Designed said...

Here's the link concerning my question above. I forgot to attach it.

http://parachoo.com/portfolio/index.php

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.

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.

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

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?

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.

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 :[

hadhadhad said...

Shouldn't I be able to scroll a image around?

DEMO

hadhadhad said...

AND.. rlic

could you post your sample?

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

GamerZorg! said...

Hi, thanks for the short example. After searching on so many jquery plugins, this one is the real help for me.

Hardy 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);

}

86me said...
This comment has been removed by the author.
86me 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

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

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

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?

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

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

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

nahmean 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

DrewBaker said...
This comment has been removed by the author.
DrewBaker 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?

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

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 );
};

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/

submit 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

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

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!

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.

mkai 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

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

aksel 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

dandare 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

Mr Kenzo said...

hi, it works but my flickers at the top left hand corner of the window before scrolling? any ideas?

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

Heatsink 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

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

iiiiihysteria 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

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

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

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

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

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

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

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.

gaelen 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

gaelen 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

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

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

webeditorchicago said...
This comment has been removed by the author.
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.

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?

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

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

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

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,

Eishpal Singh 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

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.

mervin said...
This comment has been removed by the author.
mervin said...
This comment has been removed by the author.
mervin said...
This comment has been removed by the author.
mervin 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;
}

Derek Leung said...

This is the right plugin that I am looking for. Thanks for the great plugin :)

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.

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

Alejandro 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

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

ekroyall said...
This comment has been removed by the author.
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'}
);

Derek Leung said...

Try this:

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

It does the same thing as this plugin does.

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!

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});
});
});

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 ?

Canterbury City Council 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.

Canterbury City Council 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.

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

Patrick 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

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

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

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

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