javascript - 单击按钮时使用 JavaScript 或 JQuery 向下滚动

我一直试图自己修复它，在这里寻找它，并且找到了很多答案，但我就是不知道如何将该代码实现到我的页面中。

我知道我可能会遇到不应该这样的事情，但我正在学习并且知道我想要解决的就是这个。

我唯一想做的就是当我单击按钮时向下滚动到“.separador”类。

这是 HTML、CSS 和 JQuery 代码:

$(".btn").click(function() {
    $('html, body, article').animate({
        scrollTop: $(".separador").offset().top
    }, 2000);
});

*, html{
	margin: 0 auto;
	font-family: 'Josefin Slab', serif;
}

body{
	background-image: url("fotos/principal.png");
	background-repeat: no-repeat;

}

header{
	width: 100%;
	height: 7%;
	padding-top: 15px;
	padding-bottom: 15px;
	background: -moz-linear-gradient(-45deg, rgba(112,112,112,0.65) 0%, rgba(112,112,112,0) 52%); /* FF3.6-15 */
	background: -webkit-linear-gradient(-45deg, rgba(112,112,112,0.65) 0%,rgba(112,112,112,0) 52%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(135deg, rgba(112,112,112,0.65) 0%,rgba(112,112,112,0) 52%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6707070', endColorstr='#00707070',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
	copy
	float: left;
	text-align: left;
}

ul li{
	display: inline;
	padding-right: 15px;
	font-weight: bold;

}

ul li a:link{
	color: black;
	text-decoration: none;

}

ul li a:visited{
	color: black;
	text-decoration: none;
}

ul li a:hover{
	color:white;
	text-decoration: none;
}

ul li a:active{
	color: white;
}



article{
	float: left;
	position: relative; left: 20%; top: 200px;
}

#MBOLD{
	 font-weight: bold;
	 font-size: 60px;
}

#MTHIN{
	font-size:45px;
}

article div button.btn {
  background: #808080;
  background-image: -webkit-linear-gradient(top, #808080, #4a4a4a);
  background-image: -moz-linear-gradient(top, #808080, #4a4a4a);
  background-image: -ms-linear-gradient(top, #808080, #4a4a4a);
  background-image: -o-linear-gradient(top, #808080, #4a4a4a);
  background-image: linear-gradient(to bottom, #808080, #4a4a4a);
  -webkit-border-radius: 10;
  -moz-border-radius: 10;
  border-radius: 10px;
  text-shadow: 1px 1px 3px #666666;
  color: #ffffff;
  font-size: 20px;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
  margin-top: 45px;
  margin-left: 100px;
}

article div button.btn:hover {
  background: #666666;
  background-image: -webkit-linear-gradient(top, #666666, #000000);
  background-image: -moz-linear-gradient(top, #666666, #000000);
  background-image: -ms-linear-gradient(top, #666666, #000000);
  background-image: -o-linear-gradient(top, #666666, #000000);
  background-image: linear-gradient(to bottom, #666666, #000000);
  text-decoration: none;
}

article div.separador{
	width: 100%;
    height: 1000px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>VR EXPERIENCE</title>
	<meta charset="utf-8"/>
	<link rel="stylesheet" type="text/css" href="stylesheet.css"/>
	<script src="jQuery.js"></script>
	<style>
		@import url('https://fonts.googleapis.com/css?family=Josefin+Slab');
	</style>
</head>
<body>
	<header>
		<ul>
			<li><a href="index.xhtml">Inicio</a></li>
			<li><a href="Mercado.xhtml">Mercado</a></li>
			<li><a href="Estadisticas.xhtml">Estadísticas</a></li>
			<li><a href="Conócenos.xhtml">Conócenos</a></li>
		</ul>
	</header>
	<nav></nav>
	<article>
		<div id="MBOLD">VR Experience</div>
		<div id="MTHIN">Supera los límites</div>

		<div>
			<button type="button" onclick="smoothScroll(document.getElementById('second'))" class="btn">Click Me!</button>
		</div>
		<div class="separador">
			
		</div>
	</article>
</body>
</html>

最佳答案

您似乎错过了更新方法名称。我冒昧地替换了你的$(".btn").click(function() {});进入smoothScroll() 。我还删除了传递给 smoothScroll() 的参数在html上<button>

我还替换了$('html, body, article').animate({});与 $('html').animate({});因为您只需要指定顶级元素。

var smoothScroll = function() {
    $('html').animate({
        scrollTop: $(".separador").offset().top // You can add padding by adding/subtracting from this value
    }, 2000);
};

*, html{
	margin: 0 auto;
	font-family: 'Josefin Slab', serif;
}

body{
	background-image: url("fotos/principal.png");
	background-repeat: no-repeat;

}

header{
	width: 100%;
	height: 7%;
	padding-top: 15px;
	padding-bottom: 15px;
	background: -moz-linear-gradient(-45deg, rgba(112,112,112,0.65) 0%, rgba(112,112,112,0) 52%); /* FF3.6-15 */
	background: -webkit-linear-gradient(-45deg, rgba(112,112,112,0.65) 0%,rgba(112,112,112,0) 52%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(135deg, rgba(112,112,112,0.65) 0%,rgba(112,112,112,0) 52%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6707070', endColorstr='#00707070',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
	copy
	float: left;
	text-align: left;
}

ul li{
	display: inline;
	padding-right: 15px;
	font-weight: bold;

}

ul li a:link{
	color: black;
	text-decoration: none;

}

ul li a:visited{
	color: black;
	text-decoration: none;
}

ul li a:hover{
	color:white;
	text-decoration: none;
}

ul li a:active{
	color: white;
}



article{
	float: left;
	position: relative; left: 20%; top: 200px;
}

#MBOLD{
	 font-weight: bold;
	 font-size: 60px;
}

#MTHIN{
	font-size:45px;
}

article div button.btn {
  background: #808080;
  background-image: -webkit-linear-gradient(top, #808080, #4a4a4a);
  background-image: -moz-linear-gradient(top, #808080, #4a4a4a);
  background-image: -ms-linear-gradient(top, #808080, #4a4a4a);
  background-image: -o-linear-gradient(top, #808080, #4a4a4a);
  background-image: linear-gradient(to bottom, #808080, #4a4a4a);
  -webkit-border-radius: 10;
  -moz-border-radius: 10;
  border-radius: 10px;
  text-shadow: 1px 1px 3px #666666;
  color: #ffffff;
  font-size: 20px;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
  margin-top: 45px;
  margin-left: 100px;
}

article div button.btn:hover {
  background: #666666;
  background-image: -webkit-linear-gradient(top, #666666, #000000);
  background-image: -moz-linear-gradient(top, #666666, #000000);
  background-image: -ms-linear-gradient(top, #666666, #000000);
  background-image: -o-linear-gradient(top, #666666, #000000);
  background-image: linear-gradient(to bottom, #666666, #000000);
  text-decoration: none;
}

article div.separador{
	width: 100%;
    height: 1000px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>VR EXPERIENCE</title>
	<meta charset="utf-8"/>
	<link rel="stylesheet" type="text/css" href="stylesheet.css"/>
	<script src="jQuery.js"></script>
	<style>
		@import url('https://fonts.googleapis.com/css?family=Josefin+Slab');
	</style>
</head>
<body>
	<header>
		<ul>
			<li><a href="index.xhtml">Inicio</a></li>
			<li><a href="Mercado.xhtml">Mercado</a></li>
			<li><a href="Estadisticas.xhtml">Estadísticas</a></li>
			<li><a href="Conócenos.xhtml">Conócenos</a></li>
		</ul>
	</header>
	<nav></nav>
	<article>
		<div id="MBOLD">VR Experience</div>
		<div id="MTHIN">Supera los límites</div>

		<div>
			<button type="button" onclick="smoothScroll()" class="btn">Click Me!</button>
		</div>
		<div class="separador">
			deténgase aquí (Stop here)
		</div>
	</article>
</body>
</html>

关于javascript - 单击按钮时使用 JavaScript 或 JQuery 向下滚动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48673733/

javascript - 单击按钮时使用 JavaScript 或 JQuery 向下滚动

上一篇：javascript - 字符串引用的对象未显示

下一篇：javascript - 弹出模式不要跳动