The Tiny Scrolling

Hash This post moved to the address:

http://lab.centralscrutinizer.it/the-tiny-scrollings

This entry was posted on Saturday, March 25th, 2006 at 1:44 pm. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or a (anyone still use them?) trackback from your site.

27 comments:

On March 27th, 2006, ToastSpork said: 1
Cool hack, but I seems like it doesn’t work with the back button. I From the top of the page, I clicked “How Does It Work?”, from there I clocked “forward” and got to the download section.

First click of back button did *nothing*. Second click jumped me back up to “How Does It Work?”. After that, there was no more history to click backward through.

I tried it on your other example page http://www.vlog.it/resources because it had more internal links, and I could build a longer history. It seems that the history is one click off from where it should be.

I opened a new browser tab, and browsed with the following history: {blank} -> Google -> http://www.vlog.it/resources (Top) -> Edit -> Top -> Upload -> Top -> Create

Then I clicked the back button to step backwards through the history: 1st click: (nothing) - 2nd Click: Top - 3: Upload - 4: Top - 5: Edit - 6th click: Google.

So the first click of the back button got me no movement, and then it skipped the very first history entry that should have pointed to http://www.vlog.it/resources (Top), and went right on to Google.

I know a lot of JavaScript-based clicking just ignores history/back, but I thought you might still want to know.
On March 27th, 2006, Marco Rosella said: 2
Hi, I really appreciate your test about this point, a “problem” that I saw the other smooth scrolling techniques have too, and I think that’s not so immediate to solve. Navigation with back button doesn’t work because the final URI with “#something” is a sort of “fake”, because it’s write by the “location.hash” at the end of the third function.
For example, when you are in page “home.html” e click to go to “#section”, at the end of the scroll the section is at the top of the window and the uri is “home.html#section”, but it’s only, actually, the page “home.html” scroll down.
Without javascript (note: this script is degradable) , instead, “home.html#section” is a page different from “home.html”, so the browser can back in the right way.
Anyway, i don’t see this as a really big defect, because there are hovewer the links “back to top” to support in a good way the navigation. That, i remark, it’s not a complex navigation in a site, but in only one page.
On May 6th, 2006, Vanja Gavric said: 3
Hi there!
I have been testing your script and it failed when Kerio Personal Firewall is turned on.
Since Kerio has pop-up blocker built in, it puts javascript code into every page and that seems to override tinyscrolling.
Any inputs?
On May 8th, 2006, Marco Rosella said: 4
Hi Vanja, I’ve never use this software so I didn’t know this problem.
Without a particular reason, however, this kind of security systems doesn’t like innocuous script like this: how many times have you ever had a page with two lines of js code blocked by the hateful IE’s Service Pack 2 yellow bar? :-)
On June 17th, 2006, willkoca » Archive » links for 2006-06-16 said: 5
[…] The Tiny Scrolling | Central Scrutinizer (en. vers.) (tags: javascript webdesign) […]
On June 19th, 2006, Vanja Gavric said: 6
Hi Marco!
I do understand principle of Windows platform in general is filling holes of swiss cheese, but still in the name of accessibility I will look into this problem.
Problem is that wherever I am setting up Windows machine, I recommend Kerio Firewall and now tiny scrolling is not working with it. It is far easier to fix problem with this js then installing another fw software on all computers :-)
We all know that IE is story for itself, but still we are making hacks so that our web can be display properly on IE. Only because Safari is not very popular (in world’s market meaning) it does not mean we should forget about it when coding the site.

Ok, to cut the “preaching”, I will let you know when/if I solve the problem.
On July 2nd, 2006, fathima said: 7
Hi!
First, thanks! This is an amazing piece of code. What I appreciate most is that I don’t need empty <a> tags or, in fact, edit my HTML at all. More people should know about this.
I’ve already used the code on a couple of sites, but they’re not up yet. I just thought you should be aware that the scroll does funky things when used with divs that positioned absolutely. For instance, it’ll scroll up (to the top of the page) but just jump down like normal. That wasn’t a problem for me, but I thought it might be nice for other to know about it.
Thanks again!
On July 4th, 2006, trebla said: 8
Hi Marco!

thanks for excelent code. I had just problem with links like:
a href=”#” onclick=”[some JavaScript]”

Your script rewrited present onclick!

I have fixed this on line #21

if ((lnk.href.substr(lnk.href.length-1,1)!=’#') ) && (lnk.href && lnk.href.indexOf(’#') != -1) && ….your code…

;-)
On July 23rd, 2006, 滑ら�?��?�スクロール�?��?��?�らアンカー�?�移動�?�るスクリプト | Crara Blog said: 9
[…] The Tiny Scrolling | Central Scrutinizer (en. vers.) […]
On November 17th, 2006, Henrik said: 10
Hi Marco.

First of all I’d like to say, great work! Keep it up. Here comes the question. It is posible to make this script work with horizontal scrolling?
On November 27th, 2006, Marco Rosella said: 11
Hi! Yeah, there’s The Horizontal Tiny Scrolling for you. :-)
On November 30th, 2006, SigmaLab » Blog Archive » Tiny Scrolling said: 12
[…] Tiny Scrolling is a small script dedicated to support the navigation between the internal links and their destinations. It replace that annoying and confusing jump from various part of a page with a smooth scroll of the page itself. The user will never say: “Ehi, but where am I now?” but “Oh, thanks for accompany me there!”. Also if you go to the next article you’ll find a version for horizontal scrolling. script web2.0 […]
On December 19th, 2006, Shaun said: 13
For some reason when I use this script with tags within the anchor it randomly works. Is there anything I can do to fix this? the page DOES go right to the proper anchor but only randomly tinyscrolls
On January 8th, 2007, Luke said: 14
Love this work - need a hand here. I am trying to use tiny horizontal scroller with left/right arrow images. I decided to create an Iframe at foot of page (over 50px content div border). With left & right arrow images in the new Iframe, I cant seem to get them to take effect on the main page above (the scrolling content) when rolled over. Here is what I have for the left arrow [ ] (without square brackets). Its obviously the wrong way to call up the scroll function but I know somehow it can be done and will then avoid the arrow flicker. Can you please infom me of the right way to do this - - Thanks.
On January 24th, 2007, Bryan said: 15
Hi, I love this script but was wondering if it can be used through a flash nav bar? I’d love any help and thoughts people could send my way. Thanks
On January 24th, 2007, Marco Rosella said: 16
@Luke: Hmmm, I haven’t tried with Iframe, because for accessibility is better don’t use them. You can try to use a div with position:fixed.

@Bryan:I don’t remember the Action Script’s functions for the scroll, but probably they could be use to build a similar script.
On January 26th, 2007, Bryan said: 17
Hi Marco, thanks for the reply. I was hoping to use the getURL() function in flash but didn’t know how the code would be written, something like getURL(”javascript:myFunc(’param’);”);

How would this work?
On January 26th, 2007, hazel said: 18
Thanks once again Marco ;-)
On February 18th, 2007, antis3ptick said: 19
hello its awesome script but i want something. i dont want to use this for all internalinks. can i use only for menu internal links?
On May 5th, 2007, LM said: 20
Hello,

First, great work! One question, using images in links, its doesn’t work?

thanks.
On October 30th, 2007, The Tiny Scrolling(s) - from The Lab of the weblog Central Scrutinizer said: 21
[…] published on March 25, 2006 and March 31, 2006 Start with an example is the better way to begin a javascript technique post: […]
On June 6th, 2008, Tiffany said: 22
It doesn’t seem to work with lightbox javascript.
On December 3rd, 2008, *Lush Life » ページスクロールをスムーズにしてみる said: 23
[…] tinyscrolling.js […]
On March 3rd, 2009, Wil said: 24
Hi, excellent script! However, is it possible to apply this script to a div instead of the body tag?
On April 29th, 2009, Vero said: 25
thanks!!! (Muchas gracias)

Saludos =)
On November 17th, 2009, Bjørn Collin said: 26
Hello Marco
Very nice and straight forward script. I used the thw.js version for a horizontal sliding site a few weeks ago and it worked like a charm right away in all my testing browsers. Now however I’m working on a site with vertical scroll and seem to have dificulties making the tinyscrolling.js function properly in FireFox: the sliding effect only seems to work when scrolling back to the starting point. I tried removing all other scripts linked to the site, but they don’t seem to be conflicting in any way. Any ideas?
On November 26th, 2009, Bjørn Collin said: 27
Hello again
No sweat, it’s fixed. The key to success seems to have been relative positioning of the scrolling element. Great script - cheers mate!

Central Scrutinizer

the personal homesite of Marco Rosella at it fourth version, born after long time, called Procrastination in Six Colors

The Tiny Scrolling

27 comments:

Leave a Reply

Here's the list of topics.

Here's the months' archive. The time is now, remember.