[英]scrollTo plugin doesn't seem to identify div
The following is my code. 以下是我的代码。 I am trying to scroll from once the submit button is clicked to
new-products
. 我试图从单击“提交”按钮到
new-products
滚动。 However , the below script doesn't seem to work. 但是,以下脚本似乎不起作用。
<input type="submit" value="Get Ratings" class="main-search-submit" id="go">
</div>
<div id="new-products">
</div>
<script>
$(document).ready(function(){
$(".main-search-submit").click(function() {
$.scrollTo($("#new-products"), { duration: 0});
});
</script>
<!-- Javascipt Libraries-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-scrollTo/1.4.11/jquery.scrollTo.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
</body>
Also css of my new-products
class for test purposes is : 同样,出于测试目的,我的
new-products
类的CSS是:
#new-products {
height: 2000px;
}
Am I doing something wrong ? 难道我做错了什么 ?
EDIT: Console shows -> 编辑:控制台显示->
index.html:7 GET file://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css net::ERR_FILE_NOT_FOUND
index.html:9 GET file://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js net::ERR_FILE_NOT_FOUND
index.html:22 GET file://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js net::ERR_FILE_NOT_FOUND
index.html:23 GET file://cdnjs.cloudflare.com/ajax/libs/jquery-scrollTo/1.4.11/jquery.scrollTo.min.js net::ERR_FILE_NOT_FOUND
index.html:24 GET file://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js net::ERR_FILE_NOT_FOUND
index.html:26 Uncaught ReferenceError: $ is not defined
UPD 1: Adding http:
before links helped eliminate console errors. UPD 1:在链接有助于消除控制台错误之前添加
http:
:。 But the div still doesn't scroll . 但是div仍然不滚动。
Your script has to go after jQuery and the plugins, otherwise jQuery is not available (nor are the plugins) 您的脚本必须使用jQuery和插件,否则jQuery将不可用(插件也不可用)
<input type="submit" value="Get Ratings" class="main-search-submit" id="go">
<div id="new-products"></div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-scrollTo/1.4.11/jquery.scrollTo.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".main-search-submit").click(function() {
$.scrollTo($("#new-products"), { duration: 0});
});
});
</script>
Also, you forgot to close the document.ready
function ! 另外,您忘记了关闭
document.ready
功能!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.