JSFiddle - React, Tailwind, and code Playground

by ult_combo

HTML

<div id="plugin">
  <a>1</a>
  <a>2</a>
  <a>3</a>
</div>

CSS

div {position: relative;}
/* must be non-static position (relative or absolute will do, you can set this in the plugin initialization too) */

JavaScript

(function ($) {
    $.fn.extend({
        YourPluginName: function (options) {
            var defaults = {
                howMuch: '600',
                animation: '', //users can set/change these values
                speed: 444,
                etc: ''
            };

            options = $.extend(defaults, options);

            return this.each(function () {
                var $this = $(this);
                var button = $('a', $this); //this resresents all the a selectors inside user's plugin definition.

                button.click(function () {
                    $this.animate({top: '+=' + options.howMuch}, options.speed); // calls options howMuch value
                                     //  ^ adds options.howMuch to current top
                });
            });
        }
    });
})(jQuery);



$(function () {
    $('#plugin').YourPluginName({
        howMuch: 200, // u can give chance users to set their options for plugins
        speed: 1000
    });
});