Arctic Scroll

A jQuery plugin, so cool, it's arctic!
By @pauladamdavis


This internal link scroller scrolls down the page as many simple scripts, but allows you to add an offset.

Say you want to scroll to a div, but leave 100px of space before the element for a graphic, just add an offset as a data attribute.

An Example Or Two

Generic application

Simply add the class and offset if desired and you're set.

An offset of -100 means the scroller takes 100 pixels off the amount to be scrolled, leaving a gap.

Using a positive number like +100 or simply 100 means the page scrolls an extra 100 pixels past the top left of the desired element target with the ID in the href attribute.

<a href="#example" class="arctic_scroll" data-offset="60">Example</a>

Define absolute position

If you need to scroll to a set point, just use a data-position attribute instead.

<a href="#example" class="arctic_scroll" data-position="1200">Example</a>

The Code

Open source, on GitHub, no warranty, provided as it yeah yeah yeah.


The Plugin

(function ($) {
    $.fn.arctic_scroll = function (options) {

        var defaults = {
            elem: $(this),
            speed: 500
        };
        var options = $.extend(defaults, options);

        options.elem.click(function(event){     
            event.preventDefault();
            var offset = ($(this).attr('data-offset')) ? $(this).attr('data-offset') : false,
                position = ($(this).attr('data-position')) ? $(this).attr('data-position') : false;         
            if (offset) {
                var toMove = parseInt(offset);
                $('html,body').stop(true, false).animate({scrollTop: ($(this.hash).offset().top + toMove) }, options.speed);
            } else if (position) {
                var toMove = parseInt(position);
                $('html,body').stop(true, false).animate({scrollTop: toMove }, options.speed);
            } else {
                $('html,body').stop(true, false).animate({scrollTop: ($(this.hash).offset().top) }, options.speed);
            }
        });

    };
})(jQuery);

The initialization

Just choose your CSS selector and then call the plugin. There's only one option; speed. Its default is 500ms, set to 800 in the below example.

$(function(){
    $(".arctic_scroll").arctic_scroll({
        speed: 800
    });
});