jQuery滚动动画滚动到div的底部而不是顶部

时间：2019-01-31 11:08:20

标签： javascript jquery html css

我正在制作一个网站导航栏。单击导航栏中的项目时，应滚动到特定的div。但它会滚动到div的底部而不是顶部。

我找不到错误，有人可以帮助我吗？

欢迎任何帮助。

我的代码：

* {box-sizing: border-box;}
body { 
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  background-color: #10171e;
  color: white;
}
img{
  width: 100%;
}
.header {
  margin-bottom: 100px;
  position: fixed;
  width: 100%;
  overflow: hidden;
  background-color: #15202b;
  padding: 20px 10px;
}
.header a {
  float: left;
  color: white;
  text-align: center;
  padding: 12px;
  text-decoration: none;
  font-size: 18px; 
  line-height: 25px;
  border-radius: 4px;
}
.header a:hover {
  background-color: #ddd;
  color: black;
}
.header-right {
  float: left;
}

.home{
  /*margin-bottom: 500px;*/
}
.about{
  background: red;
  /*height: 1000px;*/
  /*margin-top: 500px;*/
  /*margin-bottom: 500px;*/
  width: 60%;
  margin-left: 20%;
}
.contact{
  background-color: blue;
  height: 1000px;
  /*margin-top: 500px;*/
  /*margin-bottom: 500px;*/
  width: 60%;
  margin-left: 20%;
}
}
@media screen and (max-width: 500px) {
  .header a {
    float: none;
    display: block;
    text-align: left;
  }
  
  .header-right {
    float: none;
  }
}
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" type="text/css" href="style.css">
	<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
	<title>Jurjen</title>
</head>
<body>
	<div class="home">
		<div class="header">
    		<a class="nav" href="#" id="home">Home</a>
    		<a class="nav" href="#" id="about">About</a>
    		<a class="nav" href="#" id="contact">Contact</a>
		</div>
		<img src="img/programmer1.png" alt="programmer"> 
		<a id="button" class="arrow bounce" href="#"></a>
	</div>
	<div class="about">
		<p class="P1">Waarom gebruiken we het?	Het is al geruime tijd een bekend gegeven dat een lezer, tijdens het bekijken van de layout van een pagina, afgeleid wordt door de tekstuele inhoud. Het belangrijke punt van het gebruik van Lorem Ipsum is dat het uit een min of meer normale verdeling van letters bestaat, in tegenstelling tot "Hier uw tekst, hier uw tekst" wat het tot min of meer leesbaar nederlands maakt. Veel desktop publishing pakketten en web pagina editors gebruiken tegenwoordig Lorem Ipsum als hun standaard model tekst, en een zoekopdracht naar "lorem ipsum" ontsluit veel websites die nog in aanbouw zijn. Verscheidene versies hebben zich ontwikkeld in de loop van de jaren, soms per ongeluk soms expres (ingevoegde humor en dergelijke).</p>
	</div>
	<div class="contact">
		<p>Waarom gebruiken we het?Het is al geruime tijd een bekend gegeven dat een lezer, tijdens het bekijken van de layout van een pagina, afgeleid wordt door de tekstuele inhoud. Het belangrijke punt van het gebruik van Lorem Ipsum is dat het uit een min of meer normale verdeling van letters bestaat, in tegenstelling tot "Hier uw tekst, hier uw tekst" wat het tot min of meer leesbaar nederlands maakt. Veel desktop publishing pakketten en web pagina editors gebruiken tegenwoordig Lorem Ipsum als hun standaard model tekst, en een zoekopdracht naar "lorem ipsum" ontsluit veel websites die nog in aanbouw zijn. Verscheidene versies hebben zich ontwikkeld in de loop van de jaren, soms per ongeluk soms expres (ingevoegde humor en dergelijke).
		</p>
	</div>
</body>
<footer></footer>
</html>
<script type="text/javascript">
$("#button").click(function() {
	$('html,body').animate({
    	scrollTop: $(".P1").offset().top},
    	'slow');
});
$("#home").click(function() {
    $('html,body').animate({
        scrollTop: $(".home").offset().top},
        'slow');
});
$("#about").click(function() {
    $('html,body').animate({
        scrollTop: $(".about").offset().top},
        'slow');
});
$("#contact").click(function() {
    $('html,body').animate({
        scrollTop: $(".contact").offset().top},
        'slow');
});
</script>

如您所见。当您单击导航按钮时，它会滚动，但不会滚动到div的顶部，而是滚动到div的中间。是什么原因呢？

1 个答案:

答案 0 :(得分：4)

问题是因为offset().top并没有说明.header元素的高度，所以内容在其下方对齐。

要解决此问题，只需检索outerHeight()中的.header并将其从offset().top中减去。

还要注意，您可以通过使用单个选择器将所有单击处理程序全部干燥，然后通过链接单击的id元素的a来定位要滚动的元素。试试这个：

var navHeight = $('.header').outerHeight();

$(".header a").click(function() {
  $('html,body').animate({
    scrollTop: $("." + this.id).offset().top - navHeight
  }, 'slow');
});
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  background-color: #10171e;
  color: white;
}

img {
  width: 100%;
}

.header {
  margin-bottom: 100px;
  position: fixed;
  width: 100%;
  overflow: hidden;
  background-color: #15202b;
  padding: 20px 10px;
}

.header a {
  float: left;
  color: white;
  text-align: center;
  padding: 12px;
  text-decoration: none;
  font-size: 18px;
  line-height: 25px;
  border-radius: 4px;
}

.header a:hover {
  background-color: #ddd;
  color: black;
}

.header-right {
  float: left;
}

.home {
  /*margin-bottom: 500px;*/
}

.about {
  background: red;
  /*height: 1000px;*/
  /*margin-top: 500px;*/
  /*margin-bottom: 500px;*/
  width: 60%;
  margin-left: 20%;
}

.contact {
  background-color: blue;
  height: 1000px;
  /*margin-top: 500px;*/
  /*margin-bottom: 500px;*/
  width: 60%;
  margin-left: 20%;
}


}
@media screen and (max-width: 500px) {
  .header a {
    float: none;
    display: block;
    text-align: left;
  }
  
  .header-right {
    float: none;
  }
}
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>

<div class="home">
  <div class="header">
    <a class="nav" href="#" id="home">Home</a>
    <a class="nav" href="#" id="about">About</a>
    <a class="nav" href="#" id="contact">Contact</a>
  </div>
  <img src="img/programmer1.png" alt="programmer">
  <a id="button" class="arrow bounce" href="#"></a>
</div>
<div class="about">
  <p class="P1">Waarom gebruiken we het? Het is al geruime tijd een bekend gegeven dat een lezer, tijdens het bekijken van de layout van een pagina, afgeleid wordt door de tekstuele inhoud. Het belangrijke punt van het gebruik van Lorem Ipsum is dat het uit een min
    of meer normale verdeling van letters bestaat, in tegenstelling tot "Hier uw tekst, hier uw tekst" wat het tot min of meer leesbaar nederlands maakt. Veel desktop publishing pakketten en web pagina editors gebruiken tegenwoordig Lorem Ipsum als hun
    standaard model tekst, en een zoekopdracht naar "lorem ipsum" ontsluit veel websites die nog in aanbouw zijn. Verscheidene versies hebben zich ontwikkeld in de loop van de jaren, soms per ongeluk soms expres (ingevoegde humor en dergelijke).</p>
</div>
<div class="contact">
  <p>Waarom gebruiken we het?Het is al geruime tijd een bekend gegeven dat een lezer, tijdens het bekijken van de layout van een pagina, afgeleid wordt door de tekstuele inhoud. Het belangrijke punt van het gebruik van Lorem Ipsum is dat het uit een min
    of meer normale verdeling van letters bestaat, in tegenstelling tot "Hier uw tekst, hier uw tekst" wat het tot min of meer leesbaar nederlands maakt. Veel desktop publishing pakketten en web pagina editors gebruiken tegenwoordig Lorem Ipsum als hun
    standaard model tekst, en een zoekopdracht naar "lorem ipsum" ontsluit veel websites die nog in aanbouw zijn. Verscheidene versies hebben zich ontwikkeld in de loop van de jaren, soms per ongeluk soms expres (ingevoegde humor en dergelijke).
  </p>
</div>

相关问题
最新问题