About

Tired of looking for a plugin that would provide me the ability to navigate within a page without jumps, I decided to create my own code of internal navigation using anchors.

This is what the plugin does:

<a href=
"#anchor"
>
Anchor
</a>

It replaces this anchor by this one:

<a onclick=
"javascript:scrollto('#anchor');"
>
Anchor
</a>

In fact I mantain the href value but I change to href="javascript:void(0);" to prevent future errors of navigation.

The function that does this is very simple:

function smoothscroll
(
time
)
{
if
(
!time
)
time =
1000
;
$
(
'a[href^=#]'
)
.each
(
function
()
{
var
e = $
(
this
)
, id = e.attr
(
'href'
)
;
e.attr
(
'href'
,
'javascript:void
(
0
)
'
)
;
e.attr
(
'onclick'
,
'javascript:smoothscrollto
(
\''+
id
+'\'
,'+
time
+')
'
)
;
});
}

And after that the other function that we need is scrollto():

function smoothscrollto
(
id,time
)
{
var
e = $
(
id
)
, p;
if
(
e==
'#'
)
{
p =
0
;
}
else
{
p = e.offset
()
.top;
}
$
(
'html, body'
)
.animate
(
{ scrollTop: p },time
)
;
}

Examples

This page is the best example of the plugin features. If you navigate with the fixed menu links you can see the smooth scrolling. In a near future I pretend to update this plugin with support for integration into a fixed menu, identifying the section where you are.

Some sites that use this plugin:

Download

Download now this plugin expanded or minified
designed & developed by mononelo