Commit 47ebe4c2 authored by Robert Lyon's avatar Robert Lyon Committed by Gerrit Code Review

Merge "Bug 1851193: 'skip to main content' jumps to the page content"

parents 29d32897 089f8ad5
......@@ -1226,10 +1226,13 @@ $(function() {
*/
jQuery(function($) {
$(document).on('click', 'a', function(event) {
if ($(this.hash).length && location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') &&
!$(this).is('[class^="carousel"]') &&
!($(this).data('toggle') === 'collapse') &&
!($('body').hasClass('modal-open'))) {
// needs to have a target hash
// target the same page
// the target has to be in the same block and needs to be inside a tag <a>
// or the target needs to be the header
if ($(this.hash).length &&
location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') &&
$(this).closest('body').find('a' + this.hash).length) {
event.preventDefault();
var target = $(this.hash);
var headerheight = 0;
......@@ -1239,7 +1242,10 @@ jQuery(function($) {
else if ($('.container.main-content').length) {
headerheight = $('.container.main-content').offset().top;
}
$('html, body').animate({}, 500);
$('html, body').animate({
scrollTop: target.offset().top - headerheight
}, 500);
$('a' + this.hash).attr('tabindex', 0).focus();
}
});
});
......@@ -5,7 +5,7 @@
{include file="header/head.tpl"}
<body data-usethemedjs="true" class="no-js {if $ADMIN || $INSTITUTIONALADMIN || $STAFF || $INSTITUTIONALSTAFF}admin{/if} {if $loggedout}loggedout{/if} {if $pagename}{$pagename}{/if} {$presentation|default:'window'}">
<div class="skiplink btn-group btn-group-top">
<a class="sr-only sr-only-focusable btn btn-secondary" {if $headertype=='page'}href="#header-content"{else}href="#main"{/if}>{str tag=skipmenu}</a>
<a class="sr-only sr-only-focusable btn btn-secondary" {if $headertype=='page'}href="#header-target-main"{else}href="#header-main"{/if}>{str tag=skipmenu}</a>
</div>
{if $USERMASQUERADING || !$PRODUCTIONMODE || $SITECLOSED || $SITETOP}
......@@ -133,6 +133,7 @@
<div class="container main-content">
<div class="row">
<a id="header-main"></a>
<main id="main" class="{if $SIDEBARS}{if $SIDEBLOCKS.right}col-lg-9 {else}col-lg-9 order-md-2 {/if}{else}col-md-12{/if} main">
<div id="content" class="main-column{if $selected == 'content'} editcontent{/if}">
<div id="main-column-container">
......
<a id="header-target-main"></a>
<div id="header-content" class="pageheader pageheader-actions">
<div class="container pageheader-content">
<div class="row">
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment