Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
* Enables scrolling to a class instead of an ID for applications like Moodle that use YUI.
* YUI often litters your HTML code adding what appears to be random ID's for every element. This means that you can't
* actually use ID's in your HTML, and hence, cannot create in-page links. This solves that problem.
* Usage:
* 1) Add this code to your web page.
* 2) Add a class called goto-WhatEverYouWant such as class="goto-section5" to an element.
* 3) When you load the page, any classes starting with goto- will become an ID for that element.
* This will enable you to create in-page links such as <a href="#section5">Section 5</a>
* Consider combining this with the optional smooth scrolling Gist for a nice touch.
* Requires: jQuery
* @Copyright 2016-2018 TNG Consulting Inc. GPLv3+ license.
jQuery( document ).ready(function() {
// Get elements that include a class that starts with prefix.
var prefix='goto-';
jQuery("[class*='" + prefix + "']").each(function() {
// More than one class? Find the matching one for each element.
var classList = this.className.split(/\s+/);
var thisClass = jQuery.grep(classList, function(item, index) {
return item.indexOf(prefix) === 0;
// Remove the class name from the element and set the element id but without the prefix.
jQuery(this).removeClass(thisClass[0]).prop("id", thisClass[0].slice(prefix.length));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment