[英]Scroll down with JavaScript or JQuery when click on button
I've been trying to fix it by myself looking for it here, and I found a lot of answers, but I just can't figure it out how to implement that code into my page. 我一直在尝试自己解决它,我在这里找到了很多答案,但是我无法弄清楚如何在我的页面中实现该代码。
I know that I might have things that shouldn't be like that, but im learning and right know what I want to solve is that. 我知道我可能有不应该那样的事情,但是我正在学习并且正确地知道我想解决的是那件事。
The only thing I wanna do is to scroll down to the class ".separador" when I click the button. 我唯一想做的就是单击按钮时向下滚动到类“ .separador”。
this is the HTML, CSS and JQuery code: 这是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>
On the element you are setting a onclick event for a undefined function, remove it so it looks like below. 在要为未定义函数设置onclick事件的元素上,将其删除,使其如下所示。
<button type="button" class="btn">Click Me!</button>
And update your .btn click function to 并将您的.btn点击功能更新为
$(".btn").click(function() {
$('html, body').animate({
scrollTop: $(".separador").offset().top
}, 2000);
});
It looks like you missed updates method names. 看来您错过了更新方法名称。 I've taken the liberty of replacing your
$(".btn").click(function() {});
我已自由地替换了您的
$(".btn").click(function() {});
into smoothScroll()
. 进入
smoothScroll()
。 I also removed the parameters passed into smoothScroll()
on the html <button>
我还删除了html
<button>
smoothScroll()
的参数
I also replaced $('html, body, article').animate({});
我还替换了
$('html, body, article').animate({});
with $('html').animate({});
与
$('html').animate({});
because you only need to specify the top level element. 因为您只需要指定顶级元素。
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.