Help - site one page scroll

Asked

Viewed 689 times

2

Good night! I am developing a site one page scroll, I am currently developing the contact form, but when the page gave up the form the menu is in front of the form. And When I click on the form to try to write it is interpreting as if it were links. Could someone help me? follow the code.

Thank you!

function goTo(element, speed) {
	var href = element.attr('href');
	var top = $(href).offset().top;
	$("html,body").animate({scrollTop : top}, speed);
}

$(function() {
	$("#top a").click(function(e) {
		e.preventDefault();
		
		goTo($(this), 900);

	});

});
*{
	margin: 0;
	padding: 0;
	text-decoration: none;
	list-style-type: none;
}

body, html {

	height: 100%;
	

}

header {
	background-color: #2d3e50;
	width: 100%;
	height: 100px;
	position: fixed;
}

header .logo {
	display: inline;
	float: left;
	margin-left: 20px;

}

.logo img {
	width: 220px;
	margin-top: -8px;
}

header nav {
	float: right;
}

header nav ul {
	list-style-type: none;
	text-align: center;
	padding-right: 100px;
	padding-top: 37px;

}

header nav li {
	display: inline;
	
}

header nav a {
	color: #fff;
	display: inline;
	padding: 0 10px;
	text-decoration: none;
	font-size: 1.3em;
	font-family: 'Roboto', sans-serif;
}

header nav a:hover {
	color: #f44336;
}

.content {
	height: 100%;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}

.content:nth-child(2){
	background-color: #000;
}


/*formulário de contato*/
.container {
	margin-top: 170px;

}

form {
  
  margin: 0 auto;
  width: 1000px;
  height: 500px;
  padding: 1em;
  border: 1px solid #CCC;
  border-radius: 1em;

}

form div + div {
  margin-top: 1em;
}

label {
  display: inline-block;
  width: 90px;
  text-align: right;

}

input, textarea {
  
  font: 1em sans-serif;
  width: 500px;
  box-sizing: border-box;
  border: 1px solid #999;

}


input:focus, textarea:focus {
  border-color: #000;
}

textarea {
  
  vertical-align: top;
  height: 10em;
}

.button {
  
  padding-left: 90px; /
}

button {
  
  margin-left: .5em;
}
<header>
		<h1 class="logo"><img src="img/logo-ai-8.png" alt="logotipo"></h1>
		<nav id="top">
			<ul>
				<li><a href="#home">Home</li>
				<li><a href="#empresa">Empresa</li>
				<li><a href="#portifolio">Portifólio</li>
				<li><a href="#contato">Contato</li>
			</ul>
		</nav>
	</header>
<section id="home" class="content">

</section>
<section id="empresa" class="content">

</section>
<section id="portifolio" class="content">

</section>
<section id="contato" class="content">
<div class="contact">	
</div>
<div class="container">
	<form action="form-contact" method="post">
    <div>
        <label for="name">Name</label>
        <input type="text" id="name" name="user_name">
    </div>
    <div>
        <label for="mail">E-mail</label>
        <input type="email" id="mail" name="user_mail">
    </div>
    <div>
        <label for="msg">Message</label>
        <textarea id="msg" name="user_message"></textarea>
    </div>
    <div class="button">
    	<button type="submit">Send your message</button>
    </div>
</div>
</form>

</section>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
	<script type="text/javascript" src="js/main.js"></script>	
</body>
</html>

javascript css rolling

  • Stackoverflow supports HTML, Javascript and CSS codes. Make use of the tool, just edit the question and press ctrl+m.

1 answer

1

To remove the menu from the front of the form, you need to remove the CSS property position that has the value fixed, thus applying the default value static.

When you use the HTML tag <a>, you have to close it at the end of the link with </a> otherwise everything in front is also part of the link.

Here is the code with the solved problems:

function goTo(element, speed) {
  var href = element.attr('href');
  var top = $(href).offset().top;
  $("html,body").animate({scrollTop : top}, speed);
}

$(function() {
  $("#top a").click(function(e) {
    e.preventDefault();
    goTo($(this), 900);
  });
});
* {
  margin: 0;
  padding: 0;
  text-decoration: none;
  list-style-type: none;
}

body, html {
  height: 100%;
}

header {
  background-color: #2d3e50;
  width: 100%;
  height: 100px;
}

header .logo {
  display: inline;
  float: left;
  margin-left: 20px;
}

.logo img {
  width: 220px;
  margin-top: -8px;
}

header nav {
  float: right;
}

header nav ul {
  list-style-type: none;
  text-align: center;
  padding-right: 100px;
  padding-top: 37px;
}

header nav li {
  display: inline;
}

header nav a {
  color: #fff;
  display: inline;
  padding: 0 10px;
  text-decoration: none;
  font-size: 1.3em;
  font-family: 'Roboto', sans-serif;
}

header nav a:hover {
  color: #f44336;
}

.content {
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

.content:nth-child(2){
  background-color: #000;
}

/*formulário de contato*/
.container {
  margin-top: 170px;
}

form {
  margin: 0 auto;
  width: 1000px;
  height: 500px;
  padding: 1em;
  border: 1px solid #ccc;
  border-radius: 1em;
}

form div + div {
  margin-top: 1em;
}

label {
  display: inline-block;
  width: 90px;
  text-align: right;
}

input, textarea {
  font: 1em sans-serif;
  width: 500px;
  box-sizing: border-box;
  border: 1px solid #999;
}

input:focus, textarea:focus {
  border-color: #000;
}

textarea {
  vertical-align: top;
  height: 10em;
}

.button {
  padding-left: 90px;
}

button {
  margin-left: .5em;
}
<header>
  <h1 class="logo"><img src="img/logo-ai-8.png" alt="logotipo"></h1>
  <nav id="top">
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#empresa">Empresa</a></li>
      <li><a href="#portifolio">Portifólio</a></li>
      <li><a href="#contato">Contato</a></li>
    </ul>
  </nav>
</header>
<section id="home" class="content"></section>
<section id="empresa" class="content"></section>
<section id="portifolio" class="content"></section>
<section id="contato" class="content">
  <div class="contact"></div>
  <div class="container">
    <form action="form-contact" method="post">
      <div>
        <label for="name">Name</label>
        <input type="text" id="name" name="user_name">
      </div>
      <div>
        <label for="mail">E-mail</label>
        <input type="email" id="mail" name="user_mail">
      </div>
      <div>
        <label for="msg">Message</label>
        <textarea id="msg" name="user_message"></textarea>
      </div>
      <div class="button">
        <button type="submit">Send your message</button>
      </div>
    </form>
  </div>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>

Let me know if you have any questions, questions or just don’t understand any part.

If something is wrong or missing, add/edit your question if it is not already there and comment to me to know. If it is completely different from this subject, create a new question here on the site.

  • Good morning! Thank you! I didn’t take into account the question of </a>, but how would you make the menu go down with the scroll without running over the items in the sections?

  • Hi @Marcosdebarrosazevedo. What exactly do you mean by "run over the items in the sections"? What is the problem of the menu without correcting its fixed positioning?

  • Actually wanted the menu to accompany the scroll, but if you see the code before its correction when clicking on contact the form was behind the menu and not centered correctly. would have like to make a one page scroll where the <Nav> scrolls the screen along with the scroll?

  • Try changing the value of the property margin-top class container 170 pixels for only 70 (.container { margin-top: 170px; } for .container { margin-top: 70px; }).

  • Okay. Thank you! It all worked out.

  • @Marcosdebarrosazevedo Better late than never but a year and a half after ' hehe ok.

Show 1 more comment

Browser other questions tagged javascript css rolling

You are not signed in. Login or sign up in order to post.