单击按钮时平滑滚动：不适用于我，但在代码段中效果很好
[英]Smooth scroll on button click: Not working for me but works great in the Code Snippet
问题描述
I'm a beginner in JavaScript and jQuery. 
我是JavaScript和jQuery的初学者。 My css and JavaScript codes are external to html file. 我的CSS和JavaScript代码在html文件的外部。 There are already answers for this question and i tried, tried all the codes but scrolling does not work. 已经有这个问题的答案，我尝试过，尝试了所有代码，但滚动不起作用。 I don't know what i missed. 我不知道我错过了什么。 jQuery is installed (Even CDN). jQuery已安装（甚至CDN）。 Well, this code works in the snippet so probably something wrong with javaScript or JQuery. 好的，这段代码可以在代码段中运行，因此javaScript或JQuery可能有问题。 Still i don't know what is my mistake. 仍然我不知道我的错误是什么。 Please help. 请帮忙。
$("#btn1").click(function() { $('html,body').animate({ scrollTop: $("#fir").offset().top}, 'slow'); }); $("#btn2").click(function() { $('html,body').animate({ scrollTop: $("#sec").offset().top}, 'slow'); });
.button1{ position:absolute; top:130px; left:150px; font-size: 10px; cursor:pointer; color:#000000;} .main{ width: 100%; height:500px; background:black; } .first{ width: 100%; height: 1000px; background: green; } .second{ width: 100%; height: 1000px; background: blue; }
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="css/style.css"> </head> <body> <script src="http://code.jquery.com/jquery-2.2.1.min.js"></script> <!-- JQuery CDN --> <script>window.jQuery || document.write('<script src="JQuery.js"><\\/script>');</script> <!-- JQuery library --> <script src="js/script.js" type="text/javascript"></script> <!-- my javascript --> <div class="main"> <button id="btn1" type="button" class="button1">Sign Up</button> <button id="btn2" type="button" class="button1" style=left:250px>Sign In</button></div> <div id="fir" class="first"></div> <div id="sec" class="second"></div> </body> </html>
1 个解决方案
解决方案1
1 已采纳 2016-03-16 18:04:03
I have combined (for simplicity of my test) all the elements into singe .html file with some modifications and it works for me: 为了简化测试，我将所有元素合并到了singe .html文件中，并进行了一些修改，它对我有用：
- move
scripttags at the end of the document在文档末尾移动script标签 - add
document.ready()logic添加document.ready()逻辑
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<style type="text/css">
.button1{ position:absolute; top:130px; left:150px; font-size: 10px; cursor:pointer; color:#000000;}
.main{ width: 100%; height:500px; background:black; }
.first{ width: 100%; height: 1000px; background: green; }
.second{ width: 100%; height: 1000px; background: blue; }
</style>
<div class="main">
<button id="btn1" type="button" class="button1">Sign Up</button>
<button id="btn2" type="button" class="button1" style=left:250px>Sign In</button></div>
<div id="fir" class="first"></div>
<div id="sec" class="second"></div>
<script src="http://code.jquery.com/jquery-2.2.1.min.js"></script> <!-- JQuery CDN -->
<script type="text/javascript">
$( document ).ready(function() {
$("#btn1").click(function() {
$('html,body').animate({
scrollTop: $("#fir").offset().top},
'slow');
});
$("#btn2").click(function() {
$('html,body').animate({
scrollTop: $("#sec").offset().top},
'slow');
});
});
</script>
</body>
</html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.