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

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 <button> smoothScroll()的参数

我还替换了$('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>