[英]Why this Javascript code won't work on Chrome if Jquery loads as async?
[英]Why won't my Javascript/ Jquery code work
我有一个 jsfiddle,可以在这里看到: http : //jsfiddle.net/pg3n9/2/
当你使用它时,你会看到我的滚动功能工作正常,但是当我尝试用我的真实代码实现它时,我的滚动链接都不起作用!?!
这是我需要帮助的 html/css/javascript 代码,如果您能以任何方式提供帮助,那就太好了! 如果有类似的问题,我很抱歉,我很想知道在用我的 html 实现我的 javascript 时我做错了什么
罗文,
<!DOCTYPE html>
<html>
<head>
<title> Tongue n Cheek </title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link rel="stylsheet" type="text/css" href="css/index.css" />
<link href='http://fonts.googleapis.com/css?family=Raleway:400,300' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="cbp-fbscroller" class="cbp-fbscroller">
<section id="fbsection1"><section class="topheader">
<div class="navigation">
<a class="menu_link"href="#fbsection2"> scroll down </a>
<a id="email" href="mailto:contact@tongue-n-cheek.com.au?Subject:Message%20From%20Your%20Website">Email</a>
<a id="soundcloud" href="https://soundcloud.com/tongue-n-cheek" target="_blank">Sound Cloud </a>
<a id="facebook" href="https://www.facebook.com/tonguencheekofficial" target="_blank" alt="facebook"> Facebook </a>
</div>
</div>
</section>
<section id="fbsection2" name="fbsection2" alt="section2">
</div>
</section>
<section id="fbsection3" name="fbsection3" alt="section3">
</section>
</body>
<style type="text/css">
html, body,
.container,
.cbp-fbscroller,
.cbp-fbscroller section {
height:100%;
width:100%;
padding:0;
margin:0;
border:0;
}
/* The nav is fixed on the right side and we center it by translating it 50%
(we don't know it's height so we can't use the negative margin trick) */
/* background-attachment does the trick */
.cbp-fbscroller section {
position: relative;
background-position: top center;
background-repeat: no-repeat;
background-size: cover;
}
.no-touch .cbp-fbscroller section {
background-attachment: fixed;
}
#fbsection1 {
background:url(img/top.png);
background-repeat:no-repeat;
background-size:cover;
background-position:center;
}
#fbsection2 {
background:white;
height:100%;
}
#fbsection3 {
background:#1c1c1c;
height:100%;
width:100%;
}
body{ background:#1c1c1c;
}
input[type=submit] {
/* Size and position */
width: 50%;
margin-top:50%;
float:right;
padding: 8px 5px;
position:center;
/* Styles */
background: #3487FF;
border: 1px solid #4e3043;
cursor: pointer;
transition: all 0.3s ease-out;
/* Font styles */
color: white;
margin-right:25%;
font-size: 16px;
font-family: 'Raleway', 'Lato', Arial, sans-serif;
}
email , a {
text-decoration:none;
color:white;
padding:0;
top:0px;
z-index:10;
font-family:'Raleway', Helvetica;
float:right;
margin-right:20px;
transition:0.3s;
-webkit-transition:0.3s;
-moz-transition:0.3s;
-o-transition:0.3s;
margin-right:35px;
}
a:hover {
opacity:0.75;
}
#text {
float:right;
font-family:'Raleway', Helvetica;
color:black;
font-size:26px;
margin-right:30px;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$('a.menu_link').bind('click',function(event){
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top - 60
}, 1500,'easeInOutExpo', function() {
window.location.hash = $anchor.html();
});
event.preventDefault();
});
});
</script>
</html>
你缺少 jQuery UI
这是您的代码工作示例: http : //jsfiddle.net/acidrat/yGxhc/1/
所以只需将其包含在您的部分中
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
查看左侧“框架和扩展”的 jsFiddle 工具栏,您可以看到我必须启用 jquery ui
您必须添加一个div
容器来滚动文本。 我更新了你的jsFiddle
计算 scrollTop 值的正确方法:
scrollTop: $($anchor.attr('name')).offset().top - $('#container').offset().top + $('#container').scrollTop()
如果您在 PC 上使用 file:// 协议查看站点,请不要使用协议相对 URL,因为浏览器也会为 jQuery 使用该协议,因此无法找到。 使用 http 应该可以解决您的问题。 并且,还包括 jQueryUI 以用于您正在使用的 easeIn 效果。 就是这样!
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.