Move Item To Top Of List With jQuery - moveToTop.js

moveToTop.js is a funny jQuery plugin that makes it possible to smoothly move an item to the top (or any position) of the list when needed.

How to use it:

1. To begin with, load the moveToTop.js script after jQuery.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/moveToTop.js"></script>

2. Create a regular HTML list on the page.

<ul class="items-list">
  <li class="item">Item 1</li>
  <li class="item">Item 2</li>
  <li class="item">Item 3</li>
  <li class="item">Item 4</li>
  <li class="item">Item 5</li>
  <li class="item">Item 6</li>
  ...
</ul>

3. Attach the function and move an item to the top of the previous one when clicked.

$('.item').on('click', function () {
  $(this).moveToTop({
    // options here
  });
})

4. Or move an item to the top of the list when clicked.

$('.item').on('click', function () {
  $(this).moveToTop({
    target: $('.items-list .item:first-child')
  });
})

5. Determine the animation speed. Default: 1000ms.

$('.item').on('click', function () {
  $(this).moveToTop({
    speed: 2000
  });
})

6. Determine the opacity of the item when moving. Default: 0.7.

$('.item').on('click', function () {
  $(this).moveToTop({
    opacity: 0.5
  });
})

7. Trigger functions when the animation starts & ends.

$('.item').on('click', function () {
  $(this).moveToTop({
    start: function () {
      // do something
    },
    end: function () {
      // do something
    }
  });
})

---

This awesome jQuery plugin is developed by hassanrazadev. For more Advanced Usages, please check the demo page or visit the official website.