https://pt.stackoverflow.com/posts/252168/edit#section{
height:100vh;
width:100vw;
}
#a{
background-color:black;
}
#b{
background-color:red;
}
#c{
background-color:green;
}
#d{
background-color:blue;
}<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><!--ImportGoogleIconFont--><linkhref="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script><!--Letbrowserknowwebsiteisoptimizedformobile--><metaname="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<nav>
<div class="nav-wrapper">
<a href="#!" class="brand-logo">Logo</a>
<a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a>
<ul class="right hide-on-med-and-down">
<li><a class="scroll" href="#1">Sass</a></li>
<li><a class="scroll" href="#2">Components</a></li>
<li><a class="scroll" href="#3">Javascript</a></li>
<li><a class="scroll" href="#4">Mobile</a></li>
</ul>
<ul class="side-nav" id="mobile-demo">
<li><a class="scroll" href="#a">Sass</a></li>
<li><a class="scroll" href="#b">Components</a></li>
<li><a class="scroll" href="#c">Javascript</a></li>
<li><a class="scroll" href="#d">Mobile</a></li>
</ul>
</div>
</nav>
<section id="a"></section>
<section id="b"></section>
<section id="c"></section>
<section id="d"></section>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script><scripttype="text/javascript" src="js/materialize.min.js"></script>
<script type"text/javascript">
$(document).ready(function() {
$('.button-collapse').sideNav();
$('.scroll').click(function(event) {
event.preventDefault();
var id = $(this).attr('href');
targetOffset = $(id).offset().top;
menuHeight = $('.scroll').innerHeight();
$('html, body').animate({scrollTop:targetOffset - menuHeight}, 500)
});
});
</script>
</body>
</html>I have the function of scrolling the page when clicking on a link that is inside my menu, when I'm on the mobile it introduces me to that side menu and inside it there are the links mentioned above, when clicking it scrolls to the section indicated by id, however I wanted to click it to close this side menu, so the user did not have to close. I'm using the materialize CSS framework to display the side menu. PS: I could not get the code to run here in the stack.