diff --git a/util/gh-pages/index_template.html b/util/gh-pages/index_template.html
index d34ff0a59732..e443baff0808 100644
--- a/util/gh-pages/index_template.html
+++ b/util/gh-pages/index_template.html
@@ -28,7 +28,7 @@
     <script src="script.js" defer></script> {# #}
 </head> {# #}
 <body> {# #}
-    <div id="settings-dropdown"> {# #}
+    <div id="settings-dropdown" class="dropdown"> {# #}
         <button class="settings-icon" tabindex="-1"></button> {# #}
         <div class="settings-menu" tabindex="-1"> {# #}
             <div class="setting-radio-name">Theme</div> {# #}
@@ -59,64 +59,96 @@ <h1 class="page-header">Clippy Lints <span class="badge">Total number: {{+ count
         <div id="menu-filters"> {# #}
             <div class="panel-body row"> {# #}
                 <div id="upper-filters"> {# #}
-                    <div id="lint-levels" tabindex="-1"> {# #}
+                    <div class="dropdown" data-filter="levels" tabindex="-1"> {# #}
                         <button type="button" class="btn-default dropdown-toggle"> {# #}
-                            Lint levels <span class="badge">4</span> <span class="caret"></span> {# #}
+                            Lint levels <span id="levels-count" class="badge">4</span> <span class="caret"></span> {# #}
                         </button> {# #}
-                        <ul class="dropdown-menu" id="lint-levels-selector"> {# #}
+                        <ul class="dropdown-menu"> {# #}
                             <li class="checkbox"> {# #}
-                                <button onclick="toggleElements('levels_filter', true)">All</button> {# #}
+                                <button class="reset-all">All</button> {# #}
                             </li> {# #}
                             <li class="checkbox"> {# #}
-                                <button onclick="toggleElements('levels_filter', false)">None</button> {# #}
+                                <button class="reset-none">None</button> {# #}
                             </li> {# #}
                             <li role="separator" class="divider"></li> {# #}
+                            {% for level in ["allow", "warn", "deny", "none"] %}
+                                <li class="checkbox"> {# #}
+                                    <label> {# #}
+                                        <input type="checkbox" name="{{ level }}" checked />
+                                        {{ level | capitalize }}
+                                    </label> {# #}
+                                </li> {# #}
+                            {% endfor %}
                         </ul> {# #}
                     </div> {# #}
-                    <div id="lint-groups" tabindex="-1"> {# #}
+                    <div class="dropdown" data-filter="groups" tabindex="-1"> {# #}
                         <button type="button" class="btn-default dropdown-toggle"> {# #}
-                            Lint groups <span class="badge">9</span> <span class="caret"></span> {# #}
+                            Lint groups <span id="groups-count" class="badge">9</span> <span class="caret"></span> {# #}
                         </button> {# #}
-                        <ul class="dropdown-menu" id="lint-groups-selector"> {# #}
+                        <ul class="dropdown-menu"> {# #}
                             <li class="checkbox"> {# #}
-                                <button onclick="toggleElements('groups_filter', true)">All</button> {# #}
+                                <button class="reset-all">All</button> {# #}
                             </li> {# #}
                             <li class="checkbox"> {# #}
-                                <button onclick="resetGroupsToDefault()">Default</button> {# #}
+                                <button class="reset-default">Default</button> {# #}
                             </li> {# #}
                             <li class="checkbox"> {# #}
-                                <button onclick="toggleElements('groups_filter', false)">None</button> {# #}
+                                <button class="reset-none">None</button> {# #}
                             </li> {# #}
                             <li role="separator" class="divider"></li> {# #}
+                            {% for group in ["cargo", "complexity", "correctness", "nursery", "pedantic", "perf", "restriction", "style", "suspicious", "deprecated"] %}
+                                <li class="checkbox"> {# #}
+                                    <label> {# #}
+                                        <input type="checkbox" name="{{ group }}" {% if *group != "deprecated" +%} checked {% endif %} />
+                                        {{ group | capitalize }}
+                                    </label> {# #}
+                                </li> {# #}
+                            {% endfor %}
                         </ul> {# #}
                     </div> {# #}
-                    <div id="version-filter" tabindex="-1"> {# #}
+                    <div id="version-filter" class="dropdown" tabindex="-1"> {# #}
                         <button type="button" class="btn-default dropdown-toggle"> {# #}
                             Version {#+ #}
-                            <span id="version-filter-count" class="badge">0</span> {#+ #}
+                            <span id="versions-count" class="badge">0</span> {#+ #}
                             <span class="caret"></span> {# #}
                         </button> {# #}
-                        <ul id="version-filter-selector" class="dropdown-menu"> {# #}
+                        <ul class="dropdown-menu"> {# #}
                             <li class="checkbox"> {# #}
-                                <button onclick="clearVersionFilters()">Clear filters</button> {# #}
+                                <button id="reset-versions">Clear filters</button> {# #}
                             </li> {# #}
                             <li role="separator" class="divider"></li> {# #}
+                            {% for (sym, name) in [("≥", "gte"), ("≤", "lte"), ("=", "eq")] %}
+                                <li class="checkbox"> {# #}
+                                    <label>{{ sym }}</label> {#+ #}
+                                    <span>1.</span> {# #}
+                                    <input type="number" name="{{ name }}" min="29" maxlength="2" class="version-filter-input form-control filter-input" /> {# #}
+                                    <span>.0</span> {# #}
+                                </li> {# #}
+                            {% endfor %}
                         </ul> {# #}
                     </div> {# #}
-                    <div id="lint-applicabilities" tabindex="-1"> {# #}
+                    <div class="dropdown" data-filter="applicabilities" tabindex="-1"> {# #}
                         <button type="button" class="btn-default dropdown-toggle"> {# #}
                             Applicability {#+ #}
-                            <span class="badge">4</span> {#+ #}
+                            <span id="applicabilities-count" class="badge">4</span> {#+ #}
                             <span class="caret"></span> {# #}
                         </button> {# #}
-                        <ul class="dropdown-menu" id="lint-applicabilities-selector"> {# #}
+                        <ul class="dropdown-menu"> {# #}
                             <li class="checkbox"> {# #}
-                                <button onclick="toggleElements('applicabilities_filter', true)">All</button> {# #}
+                                <button class="reset-all">All</button> {# #}
                             </li> {# #}
                             <li class="checkbox"> {# #}
-                                <button onclick="toggleElements('applicabilities_filter', false)">None</button> {# #}
+                                <button class="reset-none">None</button> {# #}
                             </li> {# #}
                             <li role="separator" class="divider"></li> {# #}
+                            {% for applicability in ["Unspecified", "MachineApplicable", "MaybeIncorrect", "HasPlaceholders"] %}
+                                <li class="checkbox"> {# #}
+                                    <label> {# #}
+                                        <input type="checkbox" name="{{ applicability }}" checked />
+                                        {{ applicability }}
+                                    </label> {# #}
+                                </li> {# #}
+                            {% endfor %}
                         </ul> {# #}
                     </div> {# #}
                 </div> {# #}
@@ -124,7 +156,7 @@ <h1 class="page-header">Clippy Lints <span class="badge">Total number: {{+ count
                     <div class="input-group"> {# #}
                         <label class="input-group-addon" id="filter-label" for="search-input">Filter:</label> {# #}
                         <input type="text" class="form-control filter-input" placeholder="Keywords or search string (`S` or `/` to focus)" id="search-input" /> {# #}
-                        <button class="filter-clear" type="button" onclick="searchState.clearInput(event)"> {# #}
+                        <button id="filter-clear" type="button"> {# #}
                             Clear {# #}
                         </button> {# #}
                     </div> {# #}
diff --git a/util/gh-pages/script.js b/util/gh-pages/script.js
index b468b52aea5b..56cd245101b2 100644
--- a/util/gh-pages/script.js
+++ b/util/gh-pages/script.js
@@ -1,13 +1,8 @@
 "use strict";
 
-window.searchState = {
-    inputElem: document.getElementById("search-input"),
+const searchState = {
     lastSearch: '',
-    clearInput: () => {
-        searchState.inputElem.value = "";
-        searchState.filterLints();
-    },
-    filterLints: () => {
+    filterLints: (updateURL = true) => {
         function matchesSearch(lint, terms, searchStr) {
             // Search by id
             if (lint.elem.id.indexOf(searchStr) !== -1) {
@@ -31,7 +26,7 @@ window.searchState = {
             return true;
         }
 
-        let searchStr = searchState.inputElem.value.trim().toLowerCase();
+        let searchStr = elements.search.value.trim().toLowerCase();
         if (searchStr.startsWith("clippy::")) {
             searchStr = searchStr.slice(8);
         }
@@ -44,21 +39,16 @@ window.searchState = {
 
         for (const lint of filters.getAllLints()) {
             lint.searchFilteredOut = !matchesSearch(lint, terms, cleanedSearchStr);
-            if (lint.filteredOut) {
-                continue;
-            }
-            if (lint.searchFilteredOut) {
+            if (lint.searchFilteredOut || lint.filteredOut) {
                 lint.elem.style.display = "none";
             } else {
                 lint.elem.style.display = "";
             }
         }
-        if (searchStr.length > 0) {
-            window.location.hash = `/${searchStr}`;
-        } else {
-            window.location.hash = '';
+
+        if (updateURL) {
+            setURL();
         }
-        updateLintCount();
     },
 };
 
@@ -84,7 +74,7 @@ function handleShortcut(ev) {
             case "S":
             case "/":
                 ev.preventDefault(); // To prevent the key to be put into the input.
-                document.getElementById("search-input").focus();
+                elements.search.focus();
                 break;
             default:
                 break;
@@ -92,25 +82,13 @@ function handleShortcut(ev) {
     }
 }
 
-function toggleElements(filter, value) {
-    let needsUpdate = false;
-    let count = 0;
-
-    const element = document.getElementById(filters[filter].id);
-    onEachLazy(
-        element.querySelectorAll("ul input"),
-        el => {
-            if (el.checked !== value) {
-                el.checked = value;
-                filters[filter][el.getAttribute("data-value")] = value;
-                needsUpdate = true;
-            }
-            count += 1;
-        }
-    );
-    element.querySelector(".badge").innerText = value ? count : 0;
-    if (needsUpdate) {
-        filters.filterLints();
+/**
+ * When `value` is `null` the default value is used - true for all but the `deprecated` lint group
+ */
+function resetCheckboxes(filter, value) {
+    for (const element of elements.checkboxes[filter]) {
+        const checked = value ?? element.name !== "deprecated";
+        element.checked = checked;
     }
 }
 
@@ -123,17 +101,9 @@ function onEachLazy(lazyArray, func) {
 
 function expandLint(lintId) {
     const elem = document.querySelector(`#${lintId} > input[type="checkbox"]`);
-    elem.checked = true;
-}
-
-function lintAnchor(event) {
-    event.preventDefault();
-    event.stopPropagation();
-
-    const id = event.target.getAttribute("href").replace("#", "");
-    window.location.hash = id;
-
-    expandLint(id);
+    if (elem) {
+        elem.checked = true;
+    }
 }
 
 const clipboardTimeouts = new Map();
@@ -157,71 +127,13 @@ function copyToClipboard(event) {
     );
 }
 
-function handleBlur(event, elementId) {
-    const parent = document.getElementById(elementId);
-    if (!parent.contains(document.activeElement) &&
-        !parent.contains(event.relatedTarget)
-    ) {
-        parent.classList.remove("open");
-    }
-}
-
 function toggleExpansion(expand) {
     for (const checkbox of document.querySelectorAll("article input[type=checkbox]")) {
         checkbox.checked = expand;
     }
 }
 
-// Returns the current URL without any query parameter or hash.
-function getNakedUrl() {
-    return window.location.href.split("?")[0].split("#")[0];
-}
-
-const GROUPS_FILTER_DEFAULT = {
-    cargo: true,
-    complexity: true,
-    correctness: true,
-    nursery: true,
-    pedantic: true,
-    perf: true,
-    restriction: true,
-    style: true,
-    suspicious: true,
-    deprecated: false,
-};
-const LEVEL_FILTERS_DEFAULT = {
-    allow: true,
-    warn: true,
-    deny: true,
-    none: true,
-};
-const APPLICABILITIES_FILTER_DEFAULT = {
-    Unspecified: true,
-    MachineApplicable: true,
-    MaybeIncorrect: true,
-    HasPlaceholders: true,
-};
-const URL_PARAMS_CORRESPONDENCE = {
-    "groups_filter": "groups",
-    "levels_filter": "levels",
-    "applicabilities_filter": "applicabilities",
-    "version_filter": "versions",
-};
-const VERSIONS_CORRESPONDENCE = {
-    "lte": "≤",
-    "gte": "≥",
-    "eq": "=",
-};
-
-window.filters = {
-    groups_filter: { id: "lint-groups", ...GROUPS_FILTER_DEFAULT },
-    levels_filter: { id: "lint-levels", ...LEVEL_FILTERS_DEFAULT },
-    applicabilities_filter: { id: "lint-applicabilities", ...APPLICABILITIES_FILTER_DEFAULT },
-    version_filter: {
-        "≥": null,
-        "≤": null,
-        "=": null,
-    },
+const filters = {
     allLints: null,
     getAllLints: () => {
         if (filters.allLints === null) {
@@ -246,72 +158,27 @@ window.filters = {
         }
         return filters.allLints;
     },
-    regenerateURLparams: () => {
-        const urlParams = new URLSearchParams(window.location.search);
-
-        function compareObjects(obj1, obj2) {
-            return (JSON.stringify(obj1) === JSON.stringify({ id: obj1.id, ...obj2 }));
-        }
-        function updateIfNeeded(filterName, obj2) {
-            const obj1 = filters[filterName];
-            const name = URL_PARAMS_CORRESPONDENCE[filterName];
-            if (!compareObjects(obj1, obj2)) {
-                urlParams.set(
-                    name,
-                    Object.entries(obj1).filter(
-                        ([key, value]) => value && key !== "id"
-                    ).map(
-                        ([key, _]) => key
-                    ).join(","),
-                );
-            } else {
-                urlParams.delete(name);
-            }
-        }
+    filterLints: (updateURL = true) => {
+        const [levels, groups, applicabilities] = ["levels", "groups", "applicabilities"].map(key => new Set(
+            elements.checkboxes[key]
+                .filter(checkbox => checkbox.checked)
+                .map(checkbox => checkbox.name)
+        ));
 
-        updateIfNeeded("groups_filter", GROUPS_FILTER_DEFAULT);
-        updateIfNeeded("levels_filter", LEVEL_FILTERS_DEFAULT);
-        updateIfNeeded(
-            "applicabilities_filter", APPLICABILITIES_FILTER_DEFAULT);
+        const [lte, gte, eq] = ["lte", "gte", "eq"].map(key => Number(elements.versions[key].value));
 
-        const versions = [];
-        if (filters.version_filter["="] !== null) {
-            versions.push(`eq:${filters.version_filter["="]}`);
-        }
-        if (filters.version_filter["≥"] !== null) {
-            versions.push(`gte:${filters.version_filter["≥"]}`);
-        }
-        if (filters.version_filter["≤"] !== null) {
-            versions.push(`lte:${filters.version_filter["≤"]}`);
-        }
-        if (versions.length !== 0) {
-            urlParams.set(URL_PARAMS_CORRESPONDENCE["version_filter"], versions.join(","));
-        } else {
-            urlParams.delete(URL_PARAMS_CORRESPONDENCE["version_filter"]);
-        }
-
-        let params = urlParams.toString();
-        if (params.length !== 0) {
-            params = `?${params}`;
-        }
+        elements.counts.versions.textContent = (lte > 0) + (gte > 0) + (eq > 0);
+        elements.counts.groups.textContent = groups.size;
+        elements.counts.levels.textContent = levels.size;
+        elements.counts.applicabilities.textContent = applicabilities.size;
 
-        const url = getNakedUrl() + params + window.location.hash
-        if (!history.state) {
-            history.pushState(null, "", url);
-        } else {
-            history.replaceState(null, "", url);
-        }
-    },
-    filterLints: () => {
-        // First we regenerate the URL parameters.
-        filters.regenerateURLparams();
         for (const lint of filters.getAllLints()) {
-            lint.filteredOut = (!filters.groups_filter[lint.group]
-                || !filters.levels_filter[lint.level]
-                || !filters.applicabilities_filter[lint.applicability]
-                || !(filters.version_filter["="] === null || lint.version === filters.version_filter["="])
-                || !(filters.version_filter["≥"] === null || lint.version >= filters.version_filter["≥"])
-                || !(filters.version_filter["≤"] === null || lint.version <= filters.version_filter["≤"])
+            lint.filteredOut = (!groups.has(lint.group)
+                || !levels.has(lint.level)
+                || !applicabilities.has(lint.applicability)
+                || !(eq === 0 || lint.version === eq)
+                || !(gte === 0 || lint.version >= gte)
+                || !(lte === 0 || lint.version <= lte)
             );
             if (lint.filteredOut || lint.searchFilteredOut) {
                 lint.elem.style.display = "none";
@@ -319,208 +186,126 @@ window.filters = {
                 lint.elem.style.display = "";
             }
         }
-    },
-};
 
-function updateFilter(elem, filter, skipLintsFiltering) {
-    const value = elem.getAttribute("data-value");
-    if (filters[filter][value] !== elem.checked) {
-        filters[filter][value] = elem.checked;
-        const counter = document.querySelector(`#${filters[filter].id} .badge`);
-        counter.innerText = parseInt(counter.innerText) + (elem.checked ? 1 : -1);
-        if (!skipLintsFiltering) {
-            filters.filterLints();
+        if (updateURL) {
+            setURL();
         }
-    }
-}
-
-function updateVersionFilters(elem, skipLintsFiltering) {
-    let value = elem.value.trim();
-    if (value.length === 0) {
-        value = null;
-    } else if (/^\d+$/.test(value)) {
-        value = parseInt(value);
-    } else {
-        console.error(`Failed to get version number from "${value}"`);
-        return;
-    }
+    },
+};
 
-    const counter = document.querySelector("#version-filter .badge");
-    let count = 0;
-    onEachLazy(document.querySelectorAll("#version-filter input"), el => {
-        if (el.value.trim().length !== 0) {
-            count += 1;
-        }
-    });
-    counter.innerText = count;
+function setupDropdown(elem) {
+    const button = elem.querySelector("button");
+    button.onclick = () => elem.classList.toggle("open");
 
-    const comparisonKind = elem.getAttribute("data-value");
-    if (filters.version_filter[comparisonKind] !== value) {
-        filters.version_filter[comparisonKind] = value;
-        if (!skipLintsFiltering) {
-            filters.filterLints();
+    const setBlur = child => {
+        child.onblur = event => {
+            if (!elem.contains(document.activeElement) &&
+                !elem.contains(event.relatedTarget)
+            ) {
+                elem.classList.remove("open");
+            }
         }
-    }
+    };
+    onEachLazy(elem.children, setBlur);
+    onEachLazy(elem.querySelectorAll("select"), setBlur);
+    onEachLazy(elem.querySelectorAll("input"), setBlur);
+    onEachLazy(elem.querySelectorAll("ul button"), setBlur);
 }
 
-function clearVersionFilters() {
-    let needsUpdate = false;
+function setURL() {
+    const url = new URL(location);
 
-    onEachLazy(document.querySelectorAll("#version-filter input"), el => {
-        el.value = "";
-        const comparisonKind = el.getAttribute("data-value");
-        if (filters.version_filter[comparisonKind] !== null) {
-            needsUpdate = true;
-            filters.version_filter[comparisonKind] = null;
+    function nonDefault(filter) {
+        return elements.checkboxes[filter]
+            .some(element => element.checked === (element.name === "deprecated"));
+    }
+    function setBoolean(filter) {
+        if (nonDefault(filter)) {
+            const value = elements.checkboxes[filter]
+                .filter(el => el.checked)
+                .map(el => el.name)
+                .join(",");
+            url.searchParams.set(filter, value);
         }
-    });
-    document.querySelector("#version-filter .badge").innerText = 0;
-    if (needsUpdate) {
-        filters.filterLints();
     }
-}
 
-function resetGroupsToDefault() {
-    let needsUpdate = false;
-    let count = 0;
-
-    onEachLazy(document.querySelectorAll("#lint-groups-selector input"), el => {
-        const key = el.getAttribute("data-value");
-        const value = GROUPS_FILTER_DEFAULT[key];
-        if (filters.groups_filter[key] !== value) {
-            filters.groups_filter[key] = value;
-            el.checked = value;
-            needsUpdate = true;
-        }
-        if (value) {
-            count += 1;
-        }
-    });
-    document.querySelector("#lint-groups .badge").innerText = count;
-    if (needsUpdate) {
-        filters.filterLints();
+    url.search = "";
+    setBoolean("groups");
+    setBoolean("levels");
+    setBoolean("applicabilities");
+
+    const versions = ["eq", "gte", "lte"]
+        .filter(op => elements.versions[op].value)
+        .map(op => `${op}:${elements.versions[op].value}`)
+        .join(",");
+    if (versions) {
+        url.searchParams.set("versions", versions);
     }
-}
 
-function generateListOfOptions(list, elementId, filter) {
-    let html = '';
-    let nbEnabled = 0;
-    for (const [key, value] of Object.entries(list)) {
-        const attr = value ? " checked" : "";
-        html += `\
-<li class="checkbox">\
-    <label class="text-capitalize">\
-        <input type="checkbox" data-value="${key}" \
-               onchange="updateFilter(this, '${filter}')"${attr}/>${key}\
-    </label>\
-</li>`;
-        if (value) {
-            nbEnabled += 1;
-        }
+    const search = elements.search.value;
+    if (search) {
+        url.searchParams.set("search", search)
     }
 
-    const elem = document.getElementById(`${elementId}-selector`);
-    elem.previousElementSibling.querySelector(".badge").innerText = `${nbEnabled}`;
-    elem.innerHTML += html;
+    url.hash = "";
 
-    setupDropdown(elementId);
+    if (!history.state) {
+        history.pushState(true, "", url);
+    } else {
+        history.replaceState(true, "", url);
+    }
 }
 
-function setupDropdown(elementId) {
-    const elem = document.getElementById(elementId);
-    const button = document.querySelector(`#${elementId} > button`);
-    button.onclick = () => elem.classList.toggle("open");
+function parseURL() {
+    const params = new URLSearchParams(window.location.search);
 
-    const setBlur = child => {
-        child.onblur = event => handleBlur(event, elementId);
-    };
-    onEachLazy(elem.children, setBlur);
-    onEachLazy(elem.querySelectorAll("select"), setBlur);
-    onEachLazy(elem.querySelectorAll("input"), setBlur);
-    onEachLazy(elem.querySelectorAll("ul button"), setBlur);
-}
+    for (const [filter, checkboxes] of Object.entries(elements.checkboxes)) {
+        if (params.has(filter)) {
+            const settings = new Set(params.get(filter).split(","));
 
-function generateSettings() {
-    setupDropdown("settings-dropdown");
-
-    generateListOfOptions(LEVEL_FILTERS_DEFAULT, "lint-levels", "levels_filter");
-    generateListOfOptions(GROUPS_FILTER_DEFAULT, "lint-groups", "groups_filter");
-    generateListOfOptions(
-        APPLICABILITIES_FILTER_DEFAULT, "lint-applicabilities", "applicabilities_filter");
-
-    let html = '';
-    for (const kind of ["≥", "≤", "="]) {
-        html += `\
-<li class="checkbox">\
-    <label>${kind}</label>\
-    <span>1.</span> \
-    <input type="number" \
-           min="29" \
-           class="version-filter-input form-control filter-input" \
-           maxlength="2" \
-           data-value="${kind}" \
-           onchange="updateVersionFilters(this)" \
-           oninput="updateVersionFilters(this)" \
-           onkeydown="updateVersionFilters(this)" \
-           onkeyup="updateVersionFilters(this)" \
-           onpaste="updateVersionFilters(this)" \
-    />
-    <span>.0</span>\
-</li>`;
+            for (const checkbox of checkboxes) {
+                checkbox.checked = settings.has(checkbox.name);
+            }
+        } else {
+            resetCheckboxes(filter, null);
+        }
     }
-    document.getElementById("version-filter-selector").innerHTML += html;
-    setupDropdown("version-filter");
-}
 
-function scrollToLint(lintId) {
-    const target = document.getElementById(lintId);
-    if (!target) {
-        return;
+    const versionStr = params.get("versions") ?? "";
+    const versions = new Map(versionStr.split(",").map(elem => elem.split(":")));
+    for (const element of Object.values(elements.versions)) {
+        element.value = versions.get(element.name) ?? "";
     }
-    target.scrollIntoView();
-    expandLint(lintId);
-}
 
-// If the page we arrive on has link to a given lint, we scroll to it.
-function scrollToLintByURL() {
-    const lintId = window.location.hash.substring(1);
-    if (lintId.length > 0) {
-        scrollToLint(lintId);
+    elements.search.value = params.get("search");
+
+    if (location.hash) {
+        expandLint(location.hash.slice(1));
     }
+
+    filters.filterLints(false);
+    searchState.filterLints(false);
 }
 
-function parseURLFilters() {
-    const urlParams = new URLSearchParams(window.location.search);
-
-    for (const [key, value] of urlParams.entries()) {
-        for (const [corres_key, corres_value] of Object.entries(URL_PARAMS_CORRESPONDENCE)) {
-            if (corres_value === key) {
-                if (key !== "versions") {
-                    const settings = new Set(value.split(","));
-                    onEachLazy(document.querySelectorAll(`#lint-${key} ul input`), elem => {
-                        elem.checked = settings.has(elem.getAttribute("data-value"));
-                        updateFilter(elem, corres_key, true);
-                    });
-                } else {
-                    const settings = value.split(",").map(elem => elem.split(":"));
-
-                    for (const [kind, value] of settings) {
-                        const elem = document.querySelector(
-                            `#version-filter input[data-value="${VERSIONS_CORRESPONDENCE[kind]}"]`);
-                        elem.value = value;
-                        updateVersionFilters(elem, true);
-                    }
-                }
-            }
-        }
+function addResetListeners(selector, value) {
+    for (const button of document.querySelectorAll(selector)) {
+        button.addEventListener("click", event => {
+            const container = event.target.closest("[data-filter]");
+            const filter = container.dataset.filter;
+            resetCheckboxes(filter, value);
+            filters.filterLints();
+        })
     }
 }
 
 function addListeners() {
-    searchState.inputElem.addEventListener("input", handleInputChanged);
+    document.getElementById("upper-filters").addEventListener("input", () => {
+        filters.filterLints();
+    });
+    elements.search.addEventListener("input", handleInputChanged);
 
-    disableShortcutsButton.addEventListener("change", () => {
-        disableShortcuts = disableShortcutsButton.checked;
+    elements.disableShortcuts.addEventListener("change", () => {
+        disableShortcuts = elements.disableShortcuts.checked;
         storeValue("disable-shortcuts", disableShortcuts);
     });
 
@@ -536,12 +321,34 @@ function addListeners() {
         if (event.target.classList.contains("copy-to-clipboard")) {
             copyToClipboard(event);
         } else if (event.target.classList.contains("anchor")) {
-            lintAnchor(event);
+            event.target.closest("article")
+                .querySelector(`input[type="checkbox"]`)
+                .checked = true;
         }
     });
 
+    document.getElementById("filter-clear").addEventListener("click", () => {
+        elements.search.value = "";
+        searchState.filterLints();
+    })
+
+    addResetListeners(".reset-all", true);
+    addResetListeners(".reset-none", false);
+    addResetListeners(".reset-default", null);
+
+    document.getElementById("reset-versions").addEventListener("click", () => {
+        for (const input of Object.values(elements.versions)) {
+            input.value = "";
+        }
+        filters.filterLints();
+    });
+
     document.addEventListener("keypress", handleShortcut);
     document.addEventListener("keydown", handleShortcut);
+
+    document.querySelectorAll(".dropdown").forEach(setupDropdown);
+
+    addEventListener("popstate", parseURL);
 }
 
 // Highlight code blocks only when they approach the viewport so that clicking the "Expand All"
@@ -565,14 +372,35 @@ function highlightLazily() {
     }
 }
 
+function findCheckboxes(filter) {
+    return [...document.querySelectorAll(`.dropdown[data-filter="${filter}"] input[type="checkbox"]`)];
+}
+
 let disableShortcuts = loadValue("disable-shortcuts") === "true";
 
-const disableShortcutsButton = document.getElementById("disable-shortcuts");
-disableShortcutsButton.checked = disableShortcuts;
+const elements = {
+    search: document.getElementById("search-input"),
+    disableShortcuts: document.getElementById("disable-shortcuts"),
+    checkboxes: {
+        levels: findCheckboxes("levels"),
+        groups: findCheckboxes("groups"),
+        applicabilities: findCheckboxes("applicabilities"),
+    },
+    versions: {
+        gte: document.querySelector(`input[name="gte"]`),
+        lte: document.querySelector(`input[name="lte"]`),
+        eq: document.querySelector(`input[name="eq"]`),
+    },
+    counts: {
+        levels: document.getElementById("levels-count"),
+        groups: document.getElementById("groups-count"),
+        applicabilities: document.getElementById("applicabilities-count"),
+        versions: document.getElementById("versions-count"),
+    },
+};
+
+elements.disableShortcuts.checked = disableShortcuts;
 
 addListeners();
 highlightLazily();
-generateSettings();
-parseURLFilters();
-scrollToLintByURL();
-filters.filterLints();
+parseURL();
diff --git a/util/gh-pages/style.css b/util/gh-pages/style.css
index 2cf93b2a71d2..18bb95cf67b6 100644
--- a/util/gh-pages/style.css
+++ b/util/gh-pages/style.css
@@ -97,10 +97,6 @@ label {
     cursor: pointer;
 }
 
-.text-capitalize {
-    text-transform: capitalize;
-}
-
 .container {
     padding-right: 15px;
     padding-left: 15px;
@@ -372,7 +368,7 @@ article:hover .panel-title-name .anchor { display: inline;}
 
 @media (max-width: 430px) {
     /* Turn the version filter list to the left */
-    #version-filter-selector {
+    #version-filter .dropdown-menu {
         right: 0;
         left: auto;
     }
@@ -532,7 +528,7 @@ summary {
 }
 
 html:not(.js) #settings-dropdown,
-html:not(.js)#menu-filters {
+html:not(.js) #menu-filters {
     display: none;
 }
 
@@ -634,7 +630,7 @@ pre, hr {
     border: 1px solid var(--theme-popup-border);
 }
 
-#version-filter-selector .checkbox {
+#version-filter .checkbox {
     display: flex;
 }
 
@@ -667,13 +663,13 @@ ul.dropdown-menu li.checkbox > button:hover {
     border-bottom: 1px solid #000000;
 }
 
-#filter-label, .filter-clear {
+#filter-label, #filter-clear {
     background: var(--searchbar-bg);
     color: var(--searchbar-fg);
     border-color: var(--theme-popup-border);
     filter: brightness(95%);
 }
-#filter-label:hover, .filter-clear:hover {
+#filter-label:hover, #filter-clear:hover {
     filter: brightness(90%);
 }
 .filter-input {
