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

2019-10-24 20:34:25 阅读：113 来源： 互联网

我正在制作一个网站导航栏.单击导航栏中的项目时,应滚动到特定的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的中间.是什么原因呢？

解决方法:

问题是因为offset().top不考虑.header元素的高度,所以内容在其下方对齐.

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

还要注意,您可以通过使用单个选择器将所有单击处理程序全部干燥,然后将所有单击处理程序的ID链接起来,然后将其定位到要滚动的元素.尝试这个：

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>

标签：css,html,javascript,jquery
来源： https://codeday.me/bug/20191024/1923373.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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