New Revised CSS Library Forums Web Tools
FAQs Awards Usage Terms Contact
Categories
Other Sections
Sweet Ads
Compatibility
Bookmark online:

FF1+ IE6+ Opr7+

Scrolling HTML bookmarks

Author: Dynamic Drive

Description: This script brings smoothness to the behaviour of same page HTML bookmarks on the page, so clicking on them gently scrolls the user to the designated HTML anchor, instead of abruptly. Besides auto transforming HTML bookmarks, you can also use this script to scroll to any element on the page using JavaScript, or scroll to an element on pageB from pageA via a URL parameter string. Abruptly jumping to an element on the page is a thing of the past!

Demos: The following demonstrates 3 ways you can scroll to an element using this script:


Directions: Developer's View

Simply insert the below script to the <HEAD> section of your document:

Select All

The script references the following .js file, which you should download (right click, and select "Save As"):

That's it for installation! Now it's time to learn about the few ways you can scroll to an element via this script:

Via ordinary HTML bookmarks/anchors

This script by default will automatically modify the behaviour of in-page link bookmarks (ie: <a href="#about">) so it scrolls to the  corresponding anchor (ie: <a name="about"></a>) on the page. There's nothing on your part to do. Note that the browser's URL in the address bar changes to include the hash (ie: #about) when bookmarks are scrolled this way.

Via JavaScript and the target element's ID

You can explicitly scroll to any element on the page and using an arbitrary link with this script. First, give the target element you want to scroll to a unique ID attribute, then call the function bookmarkscroll.scrollTo('id') inside a link, for example:

<a href="javascript:bookmarkscroll.scrollTo('sectionb')">Scroll to Section B</a>

Scroll to Section B

"sectionb" in this case is the ID attribute value given to the header "Test Section B" on the page.

Scrolling to the top of the page

You can define a bookmark link that scrolls to the top of the page when clicked on, instead of to a specific element. Just use the keyword "#top" as either the href value of your bookmark link, and as the parameter passed into bookmarkscroll.scrollTo():

<a href="#top">Back to Top</a>

<a href="javascript:bookmarkscroll.scrollTo('#top')">Back To Top</a>

The keyword "#top" can be modified inside the .js file.

Scrolling to an element on another page

You can define a link on pageA that scrolls to a specific element on pageB based on the element's ID attribute (the script needs to be installed on pageB in order for this to work). This is done by passing a parameter to the target URL string in the form "?scrollto=elementid". Here's an example:

<a href="bookmarkscroll_dev.htm?scrollto=sectionc">Scroll to Section C on pageB</a>

Scroll to Section C on pageB

Where "sectionc" is the ID of the element on pageB you wish to scroll to.

Global settings inside bookmarkscroll.js

There are a couple of global settings inside bookmarkscroll.js that you can customize:

setting: {duration:1000, yoffset:0},
topkeyword: '#top',

"Duration" sets the duration of the scroll in milliseconds, while "yoffset" sets how far up or down the target element the script should scroll to. For example, a value of -10 causes the script to rest 10 pixels above the target element, instead of directly at the target element.

Test Section A (back to top)

Ignore the following, which is just some dummy text to stretch the height of the document. Ignore the following, which is just some dummy text to stretch the height of the document.

Ignore the following, which is just some dummy text to stretch the height of the document. Ignore the following, which is just some dummy text to stretch the height of the document.

Ignore the following, which is just some dummy text to stretch the height of the document. Ignore the following, which is just some dummy text to stretch the height of the document.

Ignore the following, which is just some dummy text to stretch the height of the document. Ignore the following, which is just some dummy text to stretch the height of the document.

Ignore the following, which is just some dummy text to stretch the height of the document. Ignore the following, which is just some dummy text to stretch the height of the document.

Ignore the following, which is just some dummy text to stretch the height of the document. Ignore the following, which is just some dummy text to stretch the height of the document.

Ignore the following, which is just some dummy text to stretch the height of the document. Ignore the following, which is just some dummy text to stretch the height of the document.

Ignore the following, which is just some dummy text to stretch the height of the document. Ignore the following, which is just some dummy text to stretch the height of the document.

Ignore the following, which is just some dummy text to stretch the height of the document. Ignore the following, which is just some dummy text to stretch the height of the document.

Ignore the following, which is just some dummy text to stretch the height of the document. Ignore the following, which is just some dummy text to stretch the height of the document.

Ignore the following, which is just some dummy text to stretch the height of the document. Ignore the following, which is just some dummy text to stretch the height of the document.

Ignore the following, which is just some dummy text to stretch the height of the document. Ignore the following, which is just some dummy text to stretch the height of the document.

Ignore the following, which is just some dummy text to stretch the height of the document. Ignore the following, which is just some dummy text to stretch the height of the document.

Test Section B (back to top)

Ignore the following, which is just some dummy text to stretch the height of the document. Ignore the following, which is just some dummy text to stretch the height of the document.

Ignore the following, which is just some dummy text to stretch the height of the document. Ignore the following, which is just some dummy text to stretch the height of the document.

Ignore the following, which is just some dummy text to stretch the height of the document. Ignore the following, which is just some dummy text to stretch the height of the document.

Ignore the following, which is just some dummy text to stretch the height of the document. Ignore the following, which is just some dummy text to stretch the height of the document.

Ignore the following, which is just some dummy text to stretch the height of the document. Ignore the following, which is just some dummy text to stretch the height of the document.

Ignore the following, which is just some dummy text to stretch the height of the document. Ignore the following, which is just some dummy text to stretch the height of the document.

Ignore the following, which is just some dummy text to stretch the height of the document. Ignore the following, which is just some dummy text to stretch the height of the document.

Ignore the following, which is just some dummy text to stretch the height of the document. Ignore the following, which is just some dummy text to stretch the height of the document.

Ignore the following, which is just some dummy text to stretch the height of the document. Ignore the following, which is just some dummy text to stretch the height of the document.

Ignore the following, which is just some dummy text to stretch the height of the document. Ignore the following, which is just some dummy text to stretch the height of the document.

Ignore the following, which is just some dummy text to stretch the height of the document. Ignore the following, which is just some dummy text to stretch the height of the document.

Ignore the following, which is just some dummy text to stretch the height of the document. Ignore the following, which is just some dummy text to stretch the height of the document.

Ignore the following, which is just some dummy text to stretch the height of the document. Ignore the following, which is just some dummy text to stretch the height of the document.

Ignore the following, which is just some dummy text to stretch the height of the document. Ignore the following, which is just some dummy text to stretch the height of the document.

Ignore the following, which is just some dummy text to stretch the height of the document. Ignore the following, which is just some dummy text to stretch the height of the document.

Ignore the following, which is just some dummy text to stretch the height of the document. Ignore the following, which is just some dummy text to stretch the height of the document.

Ignore the following, which is just some dummy text to stretch the height of the document. Ignore the following, which is just some dummy text to stretch the height of the document.

Ignore the following, which is just some dummy text to stretch the height of the document. Ignore the following, which is just some dummy text to stretch the height of the document.