• Skip to main content
  • Skip to primary sidebar
  • Skip to secondary sidebar
  • Skip to footer

Coding Still

  • Home
  • About

jSmooth – A jQuery plugin

December 27, 2011 By _tasos 2 Comments

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

Click here to watch the demo

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.

Filed Under: JavaScript Tagged With: jQuery

Reader Interactions

Comments

  1. micky says

    December 29, 2011 at 07:05

    Love these tips! I am going to install this today hopefully. One question – how do you feel about adding this plugin? I don’t want to bog my site down w/ too many. Also – wondering what you think about putting a floating subscribe bar in wordpress.

    Reply
    • _tasos says

      January 12, 2012 at 21:00

      Hello Micky, my plugin is just a few lines of code and would not bog a webpage by itself. Using many plugins simultaneously could possibly do that.

      Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Categories

  • .NET Development
  • ASP.NET
  • Databases
  • Fun
  • IIS
  • JavaScript
  • Web Development

Tags

.NET Core Android ANTLR ASP.NET Ajax ASP.NET Core ASP.NET MVC ASP.NET Web Forms AWS Bouncy Castle Chartjs cli Client info detection Comic Continuous integration CSS Data backup Date handling Firebase Firefox addons Github HigLabo HTML5 Image manipulation jQuery JWT MySQL Nodejs Nuget OAuth Objectionjs OOP openssl Oracle ORM PHP Regular expressions SEO Social media SQL SQL Server UI/UX Url rewriting Videos Visual Studio Web design

Meta

  • Log in
  • Entries feed
  • Comments feed
  • WordPress.org

Secondary Sidebar

Archives

  • July 2020
  • March 2020
  • August 2019
  • December 2018
  • November 2018
  • February 2018
  • August 2016
  • June 2016
  • May 2016
  • February 2016
  • January 2016
  • August 2015
  • July 2015
  • October 2014
  • July 2014
  • November 2013
  • April 2013
  • February 2013
  • January 2013
  • December 2012
  • November 2012
  • August 2012
  • May 2012
  • February 2012
  • December 2011
  • October 2011
  • September 2011
  • August 2011
  • July 2011
  • May 2011
  • April 2011
  • March 2011
  • February 2011
  • January 2011
  • December 2010
  • November 2010
  • October 2010
  • September 2010
  • August 2010
  • July 2010

Footer

Recent Posts

  • Anatomy of an Objection.js model
  • Check your RSA private and public keys
  • Round functions on the Nth digit
  • Send FCM Notifications in C#
  • Jwt Manager
  • Things around the web #5
  • Query JSON data as relational in MySQL
  • Create and sign JWT token with RS256 using the private key
  • Drop all database objects in Oracle
  • Create and deploy a Nuget package

Latest tweets

  • Things I Wished More Developers Knew About Databases https://t.co/h4gfq6NJgo #softwaredevelopment #databases May 3, 2020 12:52
  • How a Few Lines of Code Broke Lots of Packages https://t.co/p7ZSiLY5ca #javascript May 3, 2020 12:48
  • Can someone steal my IP address and use it as their own? https://t.co/HoQ7Z3BG69 January 24, 2020 13:27
  • Organizational complexity is the best predictor of bugs in a software module https://t.co/aUYn9hD4oa #softwaredevelopment January 13, 2020 08:24
  • Capitalism for people. Socialism for companies? https://t.co/zgUoPcqnix January 5, 2020 07:46
  • http://twitter.com/codingstill

Misc Links

  • George Liatsos Blog
  • Plethora Themes
  • C# / VB Converter
  • Higlabo: .NET library for mail, DropBox, Twitter & more

Connect with me

  • GitHub
  • LinkedIn
  • RSS
  • Twitter
  • Stack Overflow

Copyright © 2021 · eleven40 Pro on Genesis Framework · WordPress · Log in