• Jump To … +
    breakpoints.js date-parse.js jquery.breakpoints.js jquery.calcRestrainedPos.js jquery.clientRect.js jquery.contentSize.js jquery.cookies.js jquery.css.js jquery.customEvent.js jquery.delimitedString.js jquery.disableEvent.js jquery.hostIframe.js jquery.hoverDelay.js jquery.htmlEncode.js jquery.imageSize.js jquery.isVisibleKeyCode.js jquery.menu.js jquery-menu-exampleskin.js jquery.modalDialog.deviceFixes.js jquery.modalDialog.getSettings.js jquery.modalDialog.header.js jquery.modalDialog.history.js jquery.modalDialog.js jquery.modalDialog.unobtrusive.js jquery.modalDialog.userAgent.js jquery.modalDialogContent.header.js jquery.modalDialogContent.js jquery.msAjax.js jquery.ns.js jquery.partialLoad.js jquery.postMessage.js jquery.proxyAll.js jquery.queryString.js jquery.richTooltip.js jquery.scrollAnchor.js jquery.uncomment.js jquery.url.js pointy.gestures.js pointy.js
  • jquery.scrollAnchor.js

  • ¶

    Simple smooth scrolling for anchors with internal page hash references.

  • ¶

    To opt-in to have anchors animate their scrolling, add attr data-scroll-anchor:

    go to section!

    (function ($, doc) {
        var loc = doc.location;
    
        function isInternalHash(uri, anchor) {
            var i = uri.indexOf('#');
            if (i === 0) {
                return true;
            }
  • ¶

    if there is a hash, test for internal link still

            else if (i > -1 && anchor && anchor.host == loc.host && anchor.path == loc.path && anchor.search == loc.search) {
                return true;
            } else {
                return false;
            }
        }
    
        function onClick(event) {
            var target = jQuery(this),
                href = target.attr('href'),
                data = target.data();
    
            if (data.scrollSelector || isInternalHash(href, target[0])) {
                event.preventDefault();
    
                var scrollToElement = $(data.scrollSelector || href.substr(href.indexOf('#'))),
                    destination = scrollToElement.offset().top - (data.scrollOffset || 30),
                    timing = data.scrollSpeed || 800;
    
                jQuery('html:not(:animated), body:not(:animated)').animate({
                        scrollTop: destination
                    },
                    timing,
                    function onAnchorScrollAnimationComplete() {
                        loc.hash = target.attr('href');
                    }
                );
    
                return false;
            }
        }
    
        $(document).on('click', '[data-scroll-anchor]', onClick);
  • ¶

    public jQuery extension to add programmatically

        $.fn.scrollAnchor = function () {
            return $(this).on('click', onClick);
        };
  • ¶

    private utility methods exposed for unit tests

        $.fn.scrollAnchor._ = {
            isInternalHash: isInternalHash
        };
    
    })(jQuery, document);