Переход по якорной ссылке работает только один раз. После этого одного раза просто закрывается менюшка без перехода( речь о мобильной версии). Если js убрать, то переходы идут нормально, но остаётся открытой менюшка.
$('a.small').click(function() {
var layout = document.querySelector('.mdl-layout');
layout.MaterialLayout.toggleDrawer();
});
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.light_green-orange.min.css" />
<link rel="stylesheet" href="style.css" />
<script defer src="https://code.getmdl.io/1.1.3/material.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script>
<body>
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class="mdl-layout__header">
<div class="mdl-layout__header-row">
<div class="mdl-layout-title">
<img style="height: 50px" src="LOGO-SD.png">
</div>
<span class="mdl-layout-spacer"></span>
<nav class="mdl-navigation mdl-layout--large-screen-only">
<a class="mdl-navigation__link" href="#main">Главная</a>
<a class="mdl-navigation__link" href="#timetable">Расписание</a>
<a class="mdl-navigation__link" href="#tasks">Задачи</a>
<a class="mdl-navigation__link" href="#extratasks">Сверхзадачи</a>
<a class="mdl-navigation__link" href="">Контакты</a>
<a class="mdl-navigation__link" href="">Регистрация</a>
</nav>
</div>
</header>
<div class="mdl-layout__drawer mdl-layout--small-screen-only">
<span class="mdl-layout-title" style="color: black;">Игронет</span>
<nav class="mdl-navigation">
<a class="mdl-navigation__link small" href="#main">Главная</a>
<a class="mdl-navigation__link small" href="#timetable">Расписание</a>
<a class="mdl-navigation__link small" href="#tasks">Задачи</a>
<a class="mdl-navigation__link small" href="#extratasks">Сверхзадачи</a>
<a class="mdl-navigation__link small" href="">Контакты</a>
<a class="mdl-navigation__link small" href="">Регистрация</a>
</nav>
</div>
<main class="mdl-layout__content">
<div class="page-content">
<div class="mdl-grid">
<div id='main' class="mdl-cell mdl-cell--8-col mdl-card mdl-shadow--2dp" style="margin: auto;">
<div class="mdl-card__title mdl-card--expand">
<h2 class="mdl-card__title-text">
«ПРОФЕССИИ БУДУЩЕГО»
</h2>
</div>
<div class="mdl-card__supporting-text">
<p><b>
ОБРАЗОВАТЕЛЬНЫЕ ФОРУМЫ
ДЛЯ ПОДГОТОВКИ ИГРОТЕХНИКОВ
«ПРОФЕССИИ БУДУЩЕГО»
РОССИЙСКОГО ДВИЖЕНИЯ ШКОЛЬНИКОВ
</b>
</p>
<p>Наша главная задача не передать вам знания, наша задача побороть ваш страх перед незнанием, научить вас учиться.</p>
<b>Участники:</b>
<p>250-300 человек, педагоги, студенты, специалисты по работе с РДШ</p>
<b>Фокус-группа:</b>
<p>300-400 детей в каждом регионе</p>
</div>
<div class="mdl-card__media mdl-cell--middle">
<img src="air_professii.jpg">
</div>
<div class="mdl-card__actions mdl-card--border">
<a style='color: white;' class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
Зарегистрироваться
</a>
</div>
</div>
</div>
<div class="mdl-grid">
<div id='timetable' class="mdl-layout-title" style="margin: auto; color: black;"><b>Наше расписание:</b>
</div>
</div>
<div class="mdl-grid mdl-cell--middle">
<div class="mdl-cell--2-offset-desktop mdl-cell--8-col-phone mdl-cell mdl-cell--4-col mdl-card mdl-shadow--2dp">
<div style="color:white;" class="mdl-card__title mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
День 1
</div>
<ul class="demo-list-icon mdl-list">
<li class="mdl-list__item">
<i class="material-icons">done</i>
<span class="mdl-list__item-primary-content">
Открытие
</span>
</li>
<li class="mdl-list__item">
<i class="material-icons">done</i>
<span class="mdl-list__item-primary-content">
Пленарное заседание
</span>
</li>
<li class="mdl-list__item">
<i class="material-icons">done</i>
<span class="mdl-list__item-primary-content">
Брейн Фитнес
</span>
</li>
<li class="mdl-list__item">
<i class="material-icons">done</i>
<span class="mdl-list__item-primary-content">
Обучение игровым кейсам и практикам
</span>
</li>
</ul>
</div>
<div class="mdl-cell mdl-cell--8-col-phone mdl-cell--4-col mdl-card mdl-shadow--2dp">
<div style="color:white;" class="mdl-card__title mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
День 2
</div>
<ul class="demo-list-icon mdl-list">
<li class="mdl-list__item">
<i class="material-icons">done</i>
<span class="mdl-list__item-primary-content">
Практикум в школах региона по отработке игр
</span>
</li>
<li class="mdl-list__item">
<i class="material-icons">done</i>
<span class="mdl-list__item-primary-content">
Обучение игровым кейсам и практикам
</span>
</li>
</ul>
</div>
<div class="mdl-cell--2-offset-desktop mdl-cell--8-col-phone mdl-cell mdl-cell--4-col mdl-card mdl-shadow--2dp">
<div style="color:white;" class="mdl-card__title mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
День 3
</div>
<ul class="demo-list-icon mdl-list">
<li class="mdl-list__item">
<i class="material-icons">done</i>
<span class="mdl-list__item-primary-content">
Практикум в школах региона по отработке игр
</span>
</li>
<li class="mdl-list__item">
<i class="material-icons">done</i>
<span class="mdl-list__item-primary-content">
Тренинги по выстраиванию образовательных и карьерных траекторий
</span>
</li>
</ul>
</div>
<div class="mdl-cell--8-col-phone mdl-cell mdl-cell--4-col mdl-card mdl-shadow--2dp">
<div style="color:white;" class="mdl-card__title mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
День 4
</div>
<ul class="demo-list-icon mdl-list">
<li class="mdl-list__item">
<i class="material-icons">done</i>
<span class="mdl-list__item-primary-content">
Подведение итогов
</span>
</li>
<li class="mdl-list__item">
<i class="material-icons">done</i>
<span class="mdl-list__item-primary-content">
Оформление договоров на аттестацию робототехников
</span>
</li>
<li class="mdl-list__item">
<i class="material-icons">done</i>
<span class="mdl-list__item-primary-content">
Подписание соглашений
</span>
</li>
<li class="mdl-list__item">
<i class="material-icons">done</i>
<span class="mdl-list__item-primary-content">
Торжественное закрытие форума
</span>
</li>
<li class="mdl-list__item">
<i class="material-icons">done</i>
<span class="mdl-list__item-primary-content">
Культурная программа
</span>
</li>
</ul>
</div>
</div>
<div class="mdl-grid">
<div id='tasks' class="mdl-layout-title" id='tasks' style="margin: auto; color: black;"><b>Наши задачи:</b>
</div>
</div>
<div class="mdl-grid">
<div class="mdl-cell--2-offset-desktop mdl-cell--8-col-phone mdl-cell mdl-cell--4-col mdl-card mdl-shadow--2dp">
<div class="left-top">1</div>
<div class="text">Подготовка 10 -15 новых профориентационных игр и использование игр из «Атласа новых профессий»</div>
</div>
<div class="mdl-cell--8-col-phone mdl-cell mdl-cell--4-col mdl-card mdl-shadow--2dp">
<div class="left-top">2</div>
<div class="text">Обучение педагогов и активистов, работающих с РДШ 3 компетенциям:
<br>-проведение тренинговых и активных образовательных форм работы;
<br>-проведение конкретных кейсов деловых игр и отработка на фокус-группах;
<br>- принципы создание собственных деловых игр;
<br>- обучение работе с атласом новых профессий.</div>
</div>
<div class="mdl-cell--2-offset-desktop mdl-cell--8-col-phone mdl-cell mdl-cell--4-col mdl-card mdl-shadow--2dp">
<div class="left-top">3</div>
<div class="text">
Формирование профессионального сообщества игротехников, создание собственных кейсов игр
</div>
</div>
<div class="mdl-cell--8-col-phone mdl-cell mdl-cell--4-col mdl-card mdl-shadow--2dp">
<div class="left-top">4</div>
<div class="text">
Проведение чемпионата игротехников, запуск профессионального движения игротехников в образовании
</div>
</div>
</div>
<div class="mdl-grid">
<div id='extratasks' class="mdl-layout-title" style="margin: auto; color: black;"><b>Сверхзадача:</b>
</div>
</div>
<div class="mdl-grid">
<div style='margin: auto' class="mdl-cell mdl-cell--8-col mdl-card mdl-shadow--2dp">
<div id="canvas">
<p class="task first left">Включение РДШ в работу с Атласом Новых Профессий (фактически привнести атлас в каждую школу)</p>
<p style="margin-top: 60px" class="task second right">Создание интерактивной формы образования (в перспективе могут осуществлять сами школьники по принципу старшие-младшим)</p>
<p style="margin-top: 60px" class="task third left">Формирование в школах и педагогической среде повестки НТИ</p>
<p style="margin-top: 40px" class="task fourth right">Создание готовой программы ежедневной работы для актива РДШ в регионах</p>
</div>
</div>
</div>
</div>
<footer class="mdl-mega-footer">
<div class="mdl-mega-footer__middle-section">
<div class="mdl-mega-footer__drop-down-section">
<input class="mdl-mega-footer__heading-checkbox" type="checkbox" checked>
<h1 class="mdl-mega-footer__heading">Партнёры</h1>
<ul class="mdl-mega-footer__link-list">
<li><a href="http://www.ranepa.ru/">РАНХиГС</a>
</li>
<li><a href="http://alterschool.com">Школа Будущих Президентов</a>
</li>
<li><a href="https://asi.ru">Агенство Стратегических Инициатив</a>
</li>
<li><a href="https://www.oprf.ru/">Общественная палата РФ</a>
</li>
<li><a href="http://kremlin.ru/">Администрация Президента РФ</a>
</li>
<li><a href="http://xn----ctbbfgafpccvblxfoe7o3c.xn--p1ai/">Российское движение школьников</a>
</li>
</ul>
</div>
</div>
<div class="mdl-mega-footer__bottom-section">
<div class="mdl-logo">Школа Будущих Президентов</div>
<ul class="mdl-mega-footer__link-list">
<li><a href="#">О нас </a>
</li>
<li><a href="#">Контакты</a>
</li>
</ul>
</div>
</footer>
</main>
</div>
</body>