Question

我一直在努力解决这个问题，我在这里寻找它，我找到了很多答案，但我无法弄清楚如何在我的页面中实现该代码。

我知道我可能会有不应该这样的事情，但是我正在学习并知道我想解决的问题是。

我唯一想做的就是当我点击按钮时向下滚动到“.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>

Answer 1

在为未定义函数设置onclick事件的元素上，将其删除，使其如下所示。

<button type="button" class="btn">Click Me!</button>

并将.btn点击功能更新为

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

Answer 2

看起来您错过了更新方法名称。我冒昧地将$(".btn").click(function() {});替换为smoothScroll()。我还删除了传递到html smoothScroll()

上的<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>

单击按钮

2 个答案: