Smooth scrolling demo
It’s quite often, when navigating through a long document, confusing
or disorienting for users to click a link which immediately jumps them
to somewhere else in that document. Are they on the same page, on a
different page, should they scroll more from here, what’s going on?
Smooth link scrolling alleviates this a little, by scrolling the
page to the new link rather than jumping there directly. Try the links
below (and the “back to top” links) to jump around the document to see
the effect. Happy scrolling!
To apply this effect to your own pages, simply download smoothscroll.js and include it in the
<head> of your page like any other JavaScript, using something
like <script src=”smoothscroll.js”></script>.
Script updated 2006-01-31 to handle links with images in: thanks to
Gerd Xhonneux!
Script updated 2007-11-11 to scroll to ids as well as named anchors
Paragraph 0
Paragraph 1
Paragraph 2
Paragraph 3
Paragraph 4
Paragraph 5
Paragraph 6
Paragraph 7
Paragraph 8
Paragraph 9
Paragraph 10
Paragraph 11
Paragraph 12
Paragraph 13
Paragraph 14
Paragraph 15
Paragraph 16
Paragraph 17
Paragraph 18
Paragraph 19
Paragraph 20
Paragraph 21
Paragraph 22
Paragraph 23
Paragraph 24
Paragraph 25
Paragraph 26
Paragraph 27
Paragraph 28
Paragraph 29
Paragraph 0
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec
laoreet. Praesent sit amet odio vel metus suscipit suscipit. Lorem
ipsum dolor sit amet, consectetuer adipiscing elit. Fusce adipiscing.
Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Aliquam et est quis risus ornare interdum.
Mauris vitae nulla. Donec est. Morbi nec eros id lectus consequat
venenatis. Suspendisse augue. Nam at erat. Nunc eget eros vel orci
porta dictum.
Paragraph 1
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec
laoreet. Praesent sit amet odio vel metus suscipit suscipit. Lorem
ipsum dolor sit amet, consectetuer adipiscing elit. Fusce adipiscing.
Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Aliquam et est quis risus ornare interdum.
Mauris vitae nulla. Donec est. Morbi nec eros id lectus consequat
venenatis. Suspendisse augue. Nam at erat. Nunc eget eros vel orci
porta dictum.
Paragraph 2
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec
laoreet. Praesent sit amet odio vel metus suscipit suscipit. Lorem
ipsum dolor sit amet, consectetuer adipiscing elit. Fusce adipiscing.
Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Aliquam et est quis risus ornare interdum.
Mauris vitae nulla. Donec est. Morbi nec eros id lectus consequat
venenatis. Suspendisse augue. Nam at erat. Nunc eget eros vel orci
porta dictum.
Paragraph 3
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec
laoreet. Praesent sit amet odio vel metus suscipit suscipit. Lorem
ipsum dolor sit amet, consectetuer adipiscing elit. Fusce adipiscing.
Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Aliquam et est quis risus ornare interdum.
Mauris vitae nulla. Donec est. Morbi nec eros id lectus consequat
venenatis. Suspendisse augue. Nam at erat. Nunc eget eros vel orci
porta dictum.
Paragraph 4
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec
laoreet. Praesent sit amet odio vel metus suscipit suscipit. Lorem
ipsum dolor sit amet, consectetuer adipiscing elit. Fusce adipiscing.
Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Aliquam et est quis risus ornare interdum.
Mauris vitae nulla. Donec est. Morbi nec eros id lectus consequat
venenatis. Suspendisse augue. Nam at erat. Nunc eget eros vel orci
porta dictum.
Paragraph 5
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec
laoreet. Praesent sit amet odio vel metus suscipit suscipit. Lorem
ipsum dolor sit amet, consectetuer adipiscing elit. Fusce adipiscing.
Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Aliquam et est quis risus ornare interdum.
Mauris vitae nulla. Donec est. Morbi nec eros id lectus consequat
venenatis. Suspendisse augue. Nam at erat. Nunc eget eros vel orci
porta dictum.
Paragraph 6
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec
laoreet. Praesent sit amet odio vel metus suscipit suscipit. Lorem
ipsum dolor sit amet, consectetuer adipiscing elit. Fusce adipiscing.
Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Aliquam et est quis risus ornare interdum.
Mauris vitae nulla. Donec est. Morbi nec eros id lectus consequat
venenatis. Suspendisse augue. Nam at erat. Nunc eget eros vel orci
porta dictum.
Paragraph 7
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec
laoreet. Praesent sit amet odio vel metus suscipit suscipit. Lorem
ipsum dolor sit amet, consectetuer adipiscing elit. Fusce adipiscing.
Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Aliquam et est quis risus ornare interdum.
Mauris vitae nulla. Donec est. Morbi nec eros id lectus consequat
venenatis. Suspendisse augue. Nam at erat. Nunc eget eros vel orci
porta dictum.
Paragraph 8
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec
laoreet. Praesent sit amet odio vel metus suscipit suscipit. Lorem
ipsum dolor sit amet, consectetuer adipiscing elit. Fusce adipiscing.
Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Aliquam et est quis risus ornare interdum.
Mauris vitae nulla. Donec est. Morbi nec eros id lectus consequat
venenatis. Suspendisse augue. Nam at erat. Nunc eget eros vel orci
porta dictum.
Paragraph 9
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec
laoreet. Praesent sit amet odio vel metus suscipit suscipit. Lorem
ipsum dolor sit amet, consectetuer adipiscing elit. Fusce adipiscing.
Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Aliquam et est quis risus ornare interdum.
Mauris vitae nulla. Donec est. Morbi nec eros id lectus consequat
venenatis. Suspendisse augue. Nam at erat. Nunc eget eros vel orci
porta dictum.
Paragraph 10
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec
laoreet. Praesent sit amet odio vel metus suscipit suscipit. Lorem
ipsum dolor sit amet, consectetuer adipiscing elit. Fusce adipiscing.
Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Aliquam et est quis risus ornare interdum.
Mauris vitae nulla. Donec est. Morbi nec eros id lectus consequat
venenatis. Suspendisse augue. Nam at erat. Nunc eget eros vel orci
porta dictum.
Paragraph 11
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec
laoreet. Praesent sit amet odio vel metus suscipit suscipit. Lorem
ipsum dolor sit amet, consectetuer adipiscing elit. Fusce adipiscing.
Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Aliquam et est quis risus ornare interdum.
Mauris vitae nulla. Donec est. Morbi nec eros id lectus consequat
venenatis. Suspendisse augue. Nam at erat. Nunc eget eros vel orci
porta dictum.
Paragraph 12
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec
laoreet. Praesent sit amet odio vel metus suscipit suscipit. Lorem
ipsum dolor sit amet, consectetuer adipiscing elit. Fusce adipiscing.
Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Aliquam et est quis risus ornare interdum.
Mauris vitae nulla. Donec est. Morbi nec eros id lectus consequat
venenatis. Suspendisse augue. Nam at erat. Nunc eget eros vel orci
porta dictum.
Paragraph 13
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec
laoreet. Praesent sit amet odio vel metus suscipit suscipit. Lorem
ipsum dolor sit amet, consectetuer adipiscing elit. Fusce adipiscing.
Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Aliquam et est quis risus ornare interdum.
Mauris vitae nulla. Donec est. Morbi nec eros id lectus consequat
venenatis. Suspendisse augue. Nam at erat. Nunc eget eros vel orci
porta dictum.
Paragraph 14
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec
laoreet. Praesent sit amet odio vel metus suscipit suscipit. Lorem
ipsum dolor sit amet, consectetuer adipiscing elit. Fusce adipiscing.
Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Aliquam et est quis risus ornare interdum.
Mauris vitae nulla. Donec est. Morbi nec eros id lectus consequat
venenatis. Suspendisse augue. Nam at erat. Nunc eget eros vel orci
porta dictum.
Paragraph 15
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec
laoreet. Praesent sit amet odio vel metus suscipit suscipit. Lorem
ipsum dolor sit amet, consectetuer adipiscing elit. Fusce adipiscing.
Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Aliquam et est quis risus ornare interdum.
Mauris vitae nulla. Donec est. Morbi nec eros id lectus consequat
venenatis. Suspendisse augue. Nam at erat. Nunc eget eros vel orci
porta dictum.
Paragraph 16
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec
laoreet. Praesent sit amet odio vel metus suscipit suscipit. Lorem
ipsum dolor sit amet, consectetuer adipiscing elit. Fusce adipiscing.
Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Aliquam et est quis risus ornare interdum.
Mauris vitae nulla. Donec est. Morbi nec eros id lectus consequat
venenatis. Suspendisse augue. Nam at erat. Nunc eget eros vel orci
porta dictum.
Paragraph 17
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec
laoreet. Praesent sit amet odio vel metus suscipit suscipit. Lorem
ipsum dolor sit amet, consectetuer adipiscing elit. Fusce adipiscing.
Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Aliquam et est quis risus ornare interdum.
Mauris vitae nulla. Donec est. Morbi nec eros id lectus consequat
venenatis. Suspendisse augue. Nam at erat. Nunc eget eros vel orci
porta dictum.
Paragraph 18
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec
laoreet. Praesent sit amet odio vel metus suscipit suscipit. Lorem
ipsum dolor sit amet, consectetuer adipiscing elit. Fusce adipiscing.
Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Aliquam et est quis risus ornare interdum.
Mauris vitae nulla. Donec est. Morbi nec eros id lectus consequat
venenatis. Suspendisse augue. Nam at erat. Nunc eget eros vel orci
porta dictum.
Paragraph 19
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec
laoreet. Praesent sit amet odio vel metus suscipit suscipit. Lorem
ipsum dolor sit amet, consectetuer adipiscing elit. Fusce adipiscing.
Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Aliquam et est quis risus ornare interdum.
Mauris vitae nulla. Donec est. Morbi nec eros id lectus consequat
venenatis. Suspendisse augue. Nam at erat. Nunc eget eros vel orci
porta dictum.
Paragraph 20
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec
laoreet. Praesent sit amet odio vel metus suscipit suscipit. Lorem
ipsum dolor sit amet, consectetuer adipiscing elit. Fusce adipiscing.
Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Aliquam et est quis risus ornare interdum.
Mauris vitae nulla. Donec est. Morbi nec eros id lectus consequat
venenatis. Suspendisse augue. Nam at erat. Nunc eget eros vel orci
porta dictum.
Paragraph 21
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec
laoreet. Praesent sit amet odio vel metus suscipit suscipit. Lorem
ipsum dolor sit amet, consectetuer adipiscing elit. Fusce adipiscing.
Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Aliquam et est quis risus ornare interdum.
Mauris vitae nulla. Donec est. Morbi nec eros id lectus consequat
venenatis. Suspendisse augue. Nam at erat. Nunc eget eros vel orci
porta dictum.
Paragraph 22
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec
laoreet. Praesent sit amet odio vel metus suscipit suscipit. Lorem
ipsum dolor sit amet, consectetuer adipiscing elit. Fusce adipiscing.
Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Aliquam et est quis risus ornare interdum.
Mauris vitae nulla. Donec est. Morbi nec eros id lectus consequat
venenatis. Suspendisse augue. Nam at erat. Nunc eget eros vel orci
porta dictum.
Paragraph 23
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec
laoreet. Praesent sit amet odio vel metus suscipit suscipit. Lorem
ipsum dolor sit amet, consectetuer adipiscing elit. Fusce adipiscing.
Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Aliquam et est quis risus ornare interdum.
Mauris vitae nulla. Donec est. Morbi nec eros id lectus consequat
venenatis. Suspendisse augue. Nam at erat. Nunc eget eros vel orci
porta dictum.
Paragraph 24
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec
laoreet. Praesent sit amet odio vel metus suscipit suscipit. Lorem
ipsum dolor sit amet, consectetuer adipiscing elit. Fusce adipiscing.
Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Aliquam et est quis risus ornare interdum.
Mauris vitae nulla. Donec est. Morbi nec eros id lectus consequat
venenatis. Suspendisse augue. Nam at erat. Nunc eget eros vel orci
porta dictum.
Paragraph 25
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec
laoreet. Praesent sit amet odio vel metus suscipit suscipit. Lorem
ipsum dolor sit amet, consectetuer adipiscing elit. Fusce adipiscing.
Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Aliquam et est quis risus ornare interdum.
Mauris vitae nulla. Donec est. Morbi nec eros id lectus consequat
venenatis. Suspendisse augue. Nam at erat. Nunc eget eros vel orci
porta dictum.
Paragraph 26
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec
laoreet. Praesent sit amet odio vel metus suscipit suscipit. Lorem
ipsum dolor sit amet, consectetuer adipiscing elit. Fusce adipiscing.
Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Aliquam et est quis risus ornare interdum.
Mauris vitae nulla. Donec est. Morbi nec eros id lectus consequat
venenatis. Suspendisse augue. Nam at erat. Nunc eget eros vel orci
porta dictum.
Paragraph 27
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec
laoreet. Praesent sit amet odio vel metus suscipit suscipit. Lorem
ipsum dolor sit amet, consectetuer adipiscing elit. Fusce adipiscing.
Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Aliquam et est quis risus ornare interdum.
Mauris vitae nulla. Donec est. Morbi nec eros id lectus consequat
venenatis. Suspendisse augue. Nam at erat. Nunc eget eros vel orci
porta dictum.
Paragraph 28
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec
laoreet. Praesent sit amet odio vel metus suscipit suscipit. Lorem
ipsum dolor sit amet, consectetuer adipiscing elit. Fusce adipiscing.
Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Aliquam et est quis risus ornare interdum.
Mauris vitae nulla. Donec est. Morbi nec eros id lectus consequat
venenatis. Suspendisse augue. Nam at erat. Nunc eget eros vel orci
porta dictum.
Paragraph 29
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec
laoreet. Praesent sit amet odio vel metus suscipit suscipit. Lorem
ipsum dolor sit amet, consectetuer adipiscing elit. Fusce adipiscing.
Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Aliquam et est quis risus ornare interdum.
Mauris vitae nulla. Donec est. Morbi nec eros id lectus consequat
venenatis. Suspendisse augue. Nam at erat. Nunc eget eros vel orci
porta dictum.
