jSmooth – A jQuery plugin

jSmooth is a jQuery plugin which allows you to have a smooth scrolling effect when you are in the same page and navigation is implemented with #anchors. It optionally adds a back button so that the user can return to its starting place and click something else.

Its use applies in cases where you have a few links in a page that lead to a different place of the same page. With pure HTML developers handle this using anchors in existing links.This plugin extends this functionality giving a smooth scroll instead of going directly to the target.

How to use the plugin

You can use the plugin in your site with the following code. By default the initialization applies to all the <a> links of the page. Optionally you can use a selector to control in which links the script can be applied.

jQuery(document).ready(function () {
    jQuery.jSmooth();
});

The plugin has a few options:

• scroll_time: This value is the time in milliseconds in which the animation occurs.
  The default value is: 300
• legacy_mode: This options handles anchors that target to <a> tags that have the name attribute. 
  The default value is: false
• allow_history: This options allows that the hash of the target will be appended to the url.
  The default value is: false
• support_top: This options handles exisitng anchors with the value top so that it sends to the top of the page. If it set to true, it will work as described when there is no element with id=”top”.
  The default value is: false
• return_image: This options adds a small arrow image next to each target so that when the user clicks it it will go back (again with the transition).
  The default value is: true
• debug: This option prints some debugging messages when set to true. This option is not available in the minified version of the script.
  The default value is: false

Here is a more thorough example of how you can use the script in your page.

jQuery(document).ready(function () {
    jQuery('nav a').jSmooth({
        legacy_mode: true,
        allow_history: false,
        support_top: true,
        return_image: true,
        debug: true
    });
});

Demo page

Download section

• You can download all the files here (js, css, jQuery and demo): jSmooth plugin 36.3 kb
• Javascript only: jSmooth.js 3.5 kb, jSmooth-min.js 1.8 kb

I really hope you like (and use!) this plugin. Please share and comment if you found it useful or came across with a bug.

Also, there are a few plugins out there that provide the same functionality. The purpose of my work was to get familiar in building a jQuery plugin, which turned out to be fun! A useful article to get me started was How to Create Your Own jQuery Plugin.