1
/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>
<!--Import Google Icon Font-->
<link href="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>
<!--Let browser know website is optimized for mobile-->
<meta name="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>
<script type="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 by clicking on a link that is inside my menu, when I am in mobile it presents me that side menu and inside it there are the links mentioned above, when clicking it scrolls up to the section indicated by the id, but I wanted the click to close this side menu, so that the user did not have to close. I’m using the materialize CSS Framework to present the side menu. PS: I couldn’t get the code to run here in the stack.
Post the code, it’s hard to help without it
– Rafael Augusto
posted from a look there
– Hudson Holanda
It would be nice a functional to simulate error, get?
– Rafael Augusto
put on your pc that it works and error appears
– Hudson Holanda