Scrolling HTML bookmarks
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:
-
Go to Test Section A (regular
anchor:
<a href="#sectiona">) -
Go to
Test Section B (via JavaScript and element's ID:
<a href="javascript:bookmarkscroll('sectionb')">) -
Go to Test
Section C on another page (URL parameter string and element's ID:
targetpage.htm?scrollto=sectionc)
Directions:
Simply insert the below script to the <HEAD> section of your document:
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>
"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>
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.