View on GitHub

Demo

Click on the "down" arrow to change this paragraph's order in the page.
The element being sorted will stay still while the rest of the page will scroll behind it.

Set-up

<!-- insert jQuery sortScroll after jQuery core -->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/jadus/jquery-sortScroll/v1.3.0/jquery.sortScroll.min.js"></script>

Basic usage

<!--
automatic initialization using css classes
you can use data attributes to change settings
animationDuration : duration of the animation in ms (default : 1000)
cssEasing : easing type for the animation (default : "ease-in-out")
keepStill : if false the page doesn't scroll to follow the element (default : true)
fixedElementsSelector : a jQuery selector so that the plugin knows your fixed elements (like the fixed nav on the left) (default : "")
-->
<div class="sort-scroll-container" data-animation-duration="1000" data-css-easing="ease-in-out" data-keep-still=true data-fixed-elements-selector=".navigation">
    <div class="sort-scroll-element">
        content1
        <button class="sort-scroll-button-up">up</button>
        <button class="sort-scroll-button-down">down</button>
    </div>
    <div class="sort-scroll-element">
        content2
        <button class="sort-scroll-button-up">up</button>
        <button class="sort-scroll-button-down">down</button>
    </div>
    <!-- more elements -->
</div>

Styling

/** jQuery-sortScroll is adding .sort-scroll-sorting to the element being sorted **/
.sort-scroll-sorting{
    background-color: rgba(255, 255, 255, 0.80);
}

/** You can of course hide or disable up and down buttons for first and last elements **/
.sort-scroll-element:nth-of-type(1) .sort-scroll-button-up, .sort-scroll-element:nth-last-of-type(1) .sort-scroll-button-down {
    pointer-events: none;
    cursor: default;
    color: #ddd;
}

Javascript initialization

// showing default options here
$(".my-container-class").sortScroll({
    animationDuration: 1000,// duration of the animation in ms
    cssEasing: "ease-in-out",// easing type for the animation
    keepStill: true,// if false the page doesn't scroll to follow the element
    fixedElementsSelector: ""// a jQuery selector so that the plugin knows your fixed elements (like the fixed nav on the left)
});

Programmatic sorting

//you can sort without buttons if you want
//here we move the 4th element (3, zero based) up (-1) without scrolling the page (false)
$(".sort-scroll-container").sortScroll("sortElement",3,-1,false)

Events

//you can do something when sorting starts and when it's done
$(".sort-scroll-container").on("sortScroll.sortStart", function(event, element, initialOrder, destinationOrder){
    var title = element.find("h4").text();
    console.log("element named "+title+" is being reordered from slot n°"+initialOrder+" to slot n°"+destinationOrder);
}

$(".sort-scroll-container").on("sortScroll.sortEnd", function(event, element, initialOrder, destinationOrder){
    var title = element.find("h4").text();
    console.log("element named "+title+" was reordered from slot n°"+initialOrder+" to slot n°"+destinationOrder);
}

About

This is my first open source project.
Feel free to make comments, raise bugs and ask for features.
This plugin is used on skipass.com but on an admin only page.
I'd be glad to know if you use it.