How to add Scrollspy to wordpress or other websites

(function ($, window, document, undefined) { $.fn.extend({ scrollspy: function (options) { // Define our defaults var defaults = { namespace: 'scrollspy', activeClass: 'active', animate: false, duration: 1000, offset: 0, container: window, replaceState: false }; // Add any overriden options to a new object options = $.extend({}, defaults, options); // Adds two numbers together var add = function (ex1, ex2) { return parseInt(ex1, 10) + parseInt(ex2, 10); } // Find our elements var findElements = function (links) { // Declare our array var elements = []; // Loop through the links for (var i = 0; i < links.length; i++) { // Get our current link var link = links[i]; // Get our hash var hash = $(link).attr("href"); // Store our has as an element var element = $(hash); // If we have an element matching the hash if (element.length > 0) { // Get our offset var top = Math.floor(element.offset().top), bottom = top + Math.floor(element.outerHeight()); // Add to our array elements.push({ element: element, hash: hash, top: top, bottom: bottom }); } } // Return our elements return elements; }; // Find our link from a hash var findLink = function (links, hash) { // For each link for (var i = 0; i < links.length; i++) { // Get our current link var link = $(links[i]); // If our hash matches the link href if (link.attr("href") === hash) { // Return the link return link; } } }; // Reset classes on our elements var resetClasses = function (links) { // For each link for (var i = 0; i < links.length; i++) { // Get our current link var link = $(links[i]); // Remove the active class link.parent().removeClass(options.activeClass); } }; // Store last fired scroll event var scrollArea = ''; // For each scrollspy instance return this.each(function () { // Declare our global variables var element = this, container = $(options.container); // Get our objects var links = $(element).find('a'); // Loop through our links for (var i = 0; i < links.length; i++) { // Get our current link var link = links[i]; // Bind the click event $(link).on("click", function (e) { // Get our target var target = $(this).attr("href"), $target = $(target); // If we have the element if ($target.length > 0) { // Get it's scroll position var top = add($target.offset().top, options.offset); // If animation is on if (options.animate) { // Animate our scroll $('html, body').animate({ scrollTop: top }, options.duration); } else { // Scroll to our position window.scrollTo(0, top); } // Prevent our link e.preventDefault(); } }); } // Set links resetClasses(links); // Get our elements var elements = findElements(links); var trackChanged = function() { // Get the position and store in an object var position = { top: add($(this).scrollTop(), Math.abs(options.offset)), left: $(this).scrollLeft() }; // Create a variable for our link var link; // Loop through our elements for (var i = 0; i < elements.length; i++) { // Get our current item var current = elements[i]; // If we are within the boundaries of our element if (position.top >= current.top && position.top < current.bottom) { // get our element var hash = current.hash; // Get the link link = findLink(links, hash); // If we have a link if (link) { // If we have an onChange function if (options.onChange && (scrollArea !== hash)) { // Fire our onChange function options.onChange(current.element, $(element), position); // set scrollArea scrollArea = hash; } // Update url if (options.replaceState) { history.replaceState( {}, '', '/' + hash ) } // Reset the classes on all other link resetClasses(links); // Add our active link to our parent link.parent().addClass(options.activeClass); // break our loop break; } } } // If we don't have a link and we have a exit function if (!link && (scrollArea !== 'exit') && options.onExit) { // Fire our onChange function options.onExit($(element), position); // Reset the classes on all other link resetClasses(links); // set scrollArea scrollArea = 'exit'; // Update url if (options.replaceState) { history.replaceState( {}, '', '/' ) } } } // Add a listener to the window container.bind('scroll.' + options.namespace, function () { trackChanged(); }); $( document ).ready(function (e) { trackChanged(); }) }); } }); })(jQuery, window, document, undefined);