单页导航无法正常工作.为什么
Onepage navigation doesn't work properly. Why?
我正在制作一个单页网站，但导航链接似乎只有在我使用Chrome和Safari时才能工作。Firefox和IE无法正常响应。
生活:http://baskra.com/teste/teste.html
我该如何解决这个问题?
HTML:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>bask.ra</title>
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900,200italic,300italic,400italic,600italic,700italic,900italic' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<!-- COMECO DO NIVO SLIDER -->
<link rel="stylesheet" href="themes/default/default.css" type="text/css" />
<link rel="stylesheet" href="nivo-slider.css" type="text/css" />
<script src="jquery.nivo.slider.pack.js" type="text/javascript"></script>
<!-- FIM DO NIVO SLIDER -->
<!-- COMECO DO MENU FIXO -->
<script type="text/javascript">
jQuery("document").ready(function($){
var nav = $('.menu-fundo');
$(window).scroll(function () {
if ($(this).scrollTop() > 0) {
nav.addClass("f-menu");
} else {
nav.removeClass("f-menu");
}
});
});
</script>
<!-- FIM DO MENU FIXO -->
</head>
<body>
<div class="menu-fundo">
<div class="menu">
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
<div class="logo">
<img src="images/logo.png" />
</div>
<ul id="menutop">
<li><a href="#contato">CONTATO</a></li>
<li><a href="#equipe">EQUIPE</a></li>
<li><a href="#quem">QUEM SOMOS</a></li>
<li><a href="#como">COMO FAZEMOS</a></li>
<li><a href="#que">O QUE FAZEMOS</a></li>
</ul>
</div>
</div>
<script>
$("#menutop a").click(function(){
var menuid = $(this).attr("href");
$("body").animate({scrollTop: $(menuid).offset().top - $('.menu').height() }, "slow");
return false;
});
</script>
<div id="slider" class="nivoSlider theme-default">
<img src="images/slide1.png"/>
<img src="images/slide2.png"/>
<img src="images/slide3.png"/>
</div>
<div class="row">
<div class="o-que-fazemos">
<a id="que"></a>
<h1 class="o-que-fazemos-title">O QUE FAZEMOS?</h1>
<h1 class="o-que-fazemos-subtitle">COMUNICAÇÃO + DESIGN</h1>
<div class="o-que-fazemos-content-1">
<br />
<br />
<b>SUA MARCA VAI ALÉM.</b><br /><br />
<b><i>Consolidar uma marca vai além.</i></b><br /><br />
Além de um simples nome, razão ou definição, consolidar uma marca depende de uma experiência. E é a partir disto que as ideias surgem. Um novo conceito e uma nova definição de negócio.<br />
A <b>BASK.RA</b> nasceu para pensar, criar e gerenciar o posicionamento da sua empresa no mercado.
</div>
<div class="o-que-fazemos-content-2">
<img src="images/oqfazemos.png" />
</div>
</div>
</div>
<div class="row">
<div class="como-fazemos">
<a id="como"></a>
<h1 class="como-fazemos-title">COMO FAZEMOS?</h1>
<div class="como-fazemos-content-1">
<img src="images/comofazemos-content1.png" />
</div>
<div class="como-fazemos-content-2">
<img src="images/comofazemos-content2.png" />
</div>
<div class="como-fazemos-content-3">
<img src="images/comofazemos-content3.png" />
</div>
<div class="como-fazemos-content-4">
<img src="images/comofazemos-content4.png" />
</div>
<div class="como-fazemos-content-5">
<img src="images/comofazemos-content5.png" />
</div>
</div>
</div>
<div class="row">
<div class="quem-somos">
<a id="quem"></a>
<h1 class="quem-somos-title">QUEM SOMOS?</h1>
<h1 class="quem-somos-subtitle">VOCÊ COM CERTEZA JÁ OUVIU FALAR DAS FAMOSAS FÓRMULAS DE BHASKARA.</h1>
<div class="quem-somos-content-1">
<br />
<br />
A equação completa de segundo grau agora pode ter mais sentido do que nunca. Pelo menos foi assim para a gente. Aprendemos a enxergar resultados claros e perfeitamente desenhados em cada problemática que analisávamos, e assim encontramos o X.
<br />
<br />
Dizem por aí que números não se comunicam. Já nós preferimos pensar que eles ajudam na evolução de qualquer negócio e podem se comunicar muito mais do que imaginamos, inclusive nos inspirando criativamente.
</div>
<div class="quem-somos-content-2">
<img src="images/quemsomos1.png" />
</div>
<br />
<br />
<br />
<br />
<br />
<hr>
<div class="quem-somos-content-3">
<img src="images/quemsomos3.png" />
</div>
<div class="quem-somos-content-4">
<br />
<br />
<img src="images/quemsomos2.png" />
</div>
</div>
</div>
<div class="row">
<div class="a-equipe">
<a id="equipe"></a>
EQUIPE<br />
<br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis placerat metus, a adipiscing ipsum. Aenean aliquam sed massa ut sagittis. Maecenas feugiat lorem consequat lobortis tincidunt. Ut commodo convallis turpis nec faucibus. Vivamus sed sodales diam. Donec eleifend nisl diam, ac luctus urna consectetur sit amet. Donec eget imperdiet mi, eu tempor ipsum. Nulla dolor eros, interdum vel viverra et, commodo a risus.
<br />
Vivamus mollis sed lectus nec malesuada. Maecenas luctus suscipit varius. Sed bibendum luctus ligula, fermentum venenatis arcu interdum eu. Praesent sollicitudin tortor arcu, eu varius nulla consectetur ac. Etiam vel interdum urna. Sed dignissim, quam eu consectetur dictum, felis nulla suscipit dolor, ut tincidunt lorem nisi ut nibh. Mauris aliquam laoreet leo, id bibendum arcu ornare vel. Vivamus ultricies fermentum porta. Praesent et mi tortor. Quisque varius mi ac nibh ultricies, id faucibus orci semper. Maecenas sit amet consectetur purus. Quisque vulputate in felis sit amet convallis. Sed pellentesque, lacus in auctor tincidunt, eros quam pellentesque magna, at rhoncus nulla mauris quis lorem. Maecenas condimentum massa ut bibendum sagittis. Etiam non fringilla felis.
<br />
Curabitur rhoncus ut nibh eget interdum. Donec gravida, nunc gravida egestas tempus, leo urna vulputate ipsum, eget euismod leo enim et mi. Quisque non adipiscing nisi. Morbi a odio non lorem sagittis egestas vel et nunc. Vestibulum et turpis egestas neque blandit porttitor. Phasellus sem tellus, elementum id odio eget, scelerisque tincidunt lectus. In hac habitasse platea dictumst. Phasellus malesuada bibendum leo sit amet commodo. Vivamus vestibulum pulvinar nisl, eget scelerisque est dictum vel. Pellentesque posuere mattis ante, quis venenatis augue. Sed malesuada risus elit, vitae bibendum mi porta nec. Ut vitae purus felis.
<br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis placerat metus, a adipiscing ipsum. Aenean aliquam sed massa ut sagittis. Maecenas feugiat lorem consequat lobortis tincidunt. Ut commodo convallis turpis nec faucibus. Vivamus sed sodales diam. Donec eleifend nisl diam, ac luctus urna consectetur sit amet. Donec eget imperdiet mi, eu tempor ipsum. Nulla dolor eros, interdum vel viverra et, commodo a risus.
</div>
</div>
<div class="row">
<div class="o-contato">
<a id="contato"></a>
CONTATO<br />
<br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis placerat metus, a adipiscing ipsum. Aenean aliquam sed massa ut sagittis. Maecenas feugiat lorem consequat lobortis tincidunt. Ut commodo convallis turpis nec faucibus. Vivamus sed sodales diam. Donec eleifend nisl diam, ac luctus urna consectetur sit amet. Donec eget imperdiet mi, eu tempor ipsum. Nulla dolor eros, interdum vel viverra et, commodo a risus.
<br />
Vivamus mollis sed lectus nec malesuada. Maecenas luctus suscipit varius. Sed bibendum luctus ligula, fermentum venenatis arcu interdum eu. Praesent sollicitudin tortor arcu, eu varius nulla consectetur ac. Etiam vel interdum urna. Sed dignissim, quam eu consectetur dictum, felis nulla suscipit dolor, ut tincidunt lorem nisi ut nibh. Mauris aliquam laoreet leo, id bibendum arcu ornare vel. Vivamus ultricies fermentum porta. Praesent et mi tortor. Quisque varius mi ac nibh ultricies, id faucibus orci semper. Maecenas sit amet consectetur purus. Quisque vulputate in felis sit amet convallis. Sed pellentesque, lacus in auctor tincidunt, eros quam pellentesque magna, at rhoncus nulla mauris quis lorem. Maecenas condimentum massa ut bibendum sagittis. Etiam non fringilla felis.
<br />
Curabitur rhoncus ut nibh eget interdum. Donec gravida, nunc gravida egestas tempus, leo urna vulputate ipsum, eget euismod leo enim et mi. Quisque non adipiscing nisi. Morbi a odio non lorem sagittis egestas vel et nunc. Vestibulum et turpis egestas neque blandit porttitor. Phasellus sem tellus, elementum id odio eget, scelerisque tincidunt lectus. In hac habitasse platea dictumst. Phasellus malesuada bibendum leo sit amet commodo. Vivamus vestibulum pulvinar nisl, eget scelerisque est dictum vel. Pellentesque posuere mattis ante, quis venenatis augue. Sed malesuada risus elit, vitae bibendum mi porta nec. Ut vitae purus felis.
<br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis placerat metus, a adipiscing ipsum. Aenean aliquam sed massa ut sagittis. Maecenas feugiat lorem consequat lobortis tincidunt. Ut commodo convallis turpis nec faucibus. Vivamus sed sodales diam. Donec eleifend nisl diam, ac luctus urna consectetur sit amet. Donec eget imperdiet mi, eu tempor ipsum. Nulla dolor eros, interdum vel viverra et, commodo a risus.
</div>
</div>
</body>
</html>
@charset "utf-8";
/* CSS Document */
html,body {
height:100%;
margin:0;
padding:0;
border:0;
}
div {
margin:0;
border:0;
}
.login {
display: table-cell;
}
logo {
border:0;
z-index:9999;
float:left;
}
hr {
display: block;
position: relative;
padding: 0;
margin: 20px auto;
height: 0;
width: 50%;
max-height: 0;
font-size: 1px;
line-height: 0;
clear: both;
border: none;
border-top: 2px solid #FFF;
border-bottom: 1px solid #FFF;
}
.menu-fundo {
background: #fff repeat-x 0 0;
left: 0;
top: 0;
z-index: 9999;
position:fixed;
}
.f-menu {
z-index: 9999;
position: fixed;
left: 0;
top: 0;
width: 100%;
} /* isso vai fazer o menu ficar fixo no topo */
.menu {
height: 100px;
left: 0;
top: 0;
z-index: 9999;
background: #fff repeat-x 0 0;
position:fixed; width:100%
}
.menu ul {
list-style: none;
font-family: 'Source Sans Pro', sans-serif;
font-size:17px;
font-weight:bold;
position: fixed;
top: 0;
right: 0;
display: table-cell;
vertical-align: middle;
width: 100%;
}
.menu ul li {
float: right;
padding-right:30px;
padding-top:0px;
}
.menu ul li:first-child {
padding-left: 0;
}
.menu ul li a {
color:#000;
text-decoration:none;
border-top:3px solid #999;
}
.menu ul li a:hover {
color: #6D6D6D;
border-top:3px solid #EA0000;
}
.row, .o-que-fazemos, .como-fazemos, .quem-somos, .a-equipe, .o-contato {
display: block;
float: left;
position: relative;
overflow: hidden;
width: 100%;
box-sizing: border-box;
-moz-box-sizing: border-box;
}
.o-que-fazemos {
background-image: url('images/oqfazemosFUNDO.png');
font-family: 'Source Sans Pro', sans-serif;
background-repeat: repeat-x repeat-y;
height:auto;
font-size:28px;
padding: 50px;
float:left;
overflow: hidden;
}
.o-que-fazemos-title {
font-family: 'Source Sans Pro', sans-serif;
font-size:80px;
text-align:center;
color:#ffc709;
font-weight:900;
letter-spacing: 2px;
}
.o-que-fazemos-subtitle {
font-family: 'Source Sans Pro', sans-serif;
font-size:80px;
text-align:center;
color:#FFF;
font-weight:900;
letter-spacing: 2px;
}
.o-que-fazemos-content-1 {
font-family: 'Source Sans Pro', sans-serif;
font-size:20px;
color:#FFF;
float:left;
margin-left:10%;
width: 30%;
}
.o-que-fazemos-content-2 {
margin-right:10%;
width: 50%;
float: left;
text-align: right;
}
.como-fazemos {
background-image: url('images/comofazemosFUNDO.png');
font-family: 'Source Sans Pro', sans-serif;
background-repeat: repeat-x repeat-y;
height:auto;
font-size:28px;
padding: 50px;
float:left;
overflow: hidden;
}
.como-fazemos-title {
font-family: 'Source Sans Pro', sans-serif;
font-size:80px;
text-align:center;
color:#FFF;
font-weight:900;
letter-spacing: 2px;
}
.como-fazemos-content-1 {
font-family: 'Source Sans Pro', sans-serif;
font-size:20px;
color:#FFF;
float:left;
width: 20%;
text-align:center;
}
.como-fazemos-content-2 {
font-family: 'Source Sans Pro', sans-serif;
font-size:20px;
color:#FFF;
margin-left:10%;
float: left;
text-align:center;
}
.como-fazemos-content-3 {
font-family: 'Source Sans Pro', sans-serif;
font-size:20px;
color:#FFF;
margin-left:3%;
width: 20%;
float: left;
text-align:center;
}
.como-fazemos-content-4 {
font-family: 'Source Sans Pro', sans-serif;
font-size:20px;
margin-left:10%;
color:#FFF;
float: left;
text-align:center;
}
.como-fazemos-content-5 {
font-family: 'Source Sans Pro', sans-serif;
font-size:20px;
color:#FFF;
width: 20%;
float: left;
text-align:center;
}
.quem-somos {
background-image: url('images/quemsomosFUNDO.png');
font-family: 'Source Sans Pro', sans-serif;
background-repeat: repeat-x repeat-y;
height:auto;
font-size:28px;
padding: 50px;
float:left;
overflow: hidden;
}
.quem-somos-content-1 {
font-family: 'Source Sans Pro', sans-serif;
font-size:20px;
color:#414042;
float:left;
margin-left:10%;
width: 40%;
text-align: left;
}
.quem-somos-content-2 {
width: 43%;
float: left;
text-align: right;
}
.quem-somos-content-3 {
float:left;
width: 50%;
text-align: center;
}
.quem-somos-content-4 {
width: 40%;
float: left;
text-align: center;
}
.quem-somos-title {
font-family: 'Source Sans Pro', sans-serif;
font-size:80px;
text-align:center;
color:#fff;
font-weight:900;
letter-spacing: 2px;
}
.quem-somos-subtitle {
font-family: 'Source Sans Pro', sans-serif;
font-size:22px;
text-align:center;
color:#414042;
font-weight:900;
letter-spacing: 2px;
}
.a-equipe {
background-image: url('images/EQUIPE-FUNDO.png');
font-family: 'Source Sans Pro', sans-serif;
background-repeat: repeat-x repeat-y;
height:auto;
font-size:28px;
padding: 50px;
}
.o-contato {
background-image: url('images/contato-FUNDO.png');
font-family: 'Source Sans Pro', sans-serif;
background-repeat: repeat-x repeat-y;
height:auto;
font-size:28px;
padding: 50px;
}
.banner {
position: relative;
overflow: auto;
}
.banner li {
list-style: none;
}
.banner ul li {
float: left;
}
在IE8中，无论如何，滚动的不是body，而是html。试试这个:
$("body, html").animate({scrollTop: $(menuid).offset().top - $('.menu').height() }, "slow");
我在js和firefox中做了一些测试，当你同时选择html和body时效果更好:
$("#menutop a").click(function(){
var menuid = $(this).attr("href");
$("html, body").animate({scrollTop: $(menuid).offset().top - $('.menu').height() }, "slow");
return false;
});
相关文章：
- 为什么这在IE中的工作方式与在Firefox中不同
- 为什么不是't窗口.恢复正常工作吗?(javascript/jquery）
- 有时 array.length 只在 .push(） 之后工作(为什么?）
- Javascript don'刷新页面后无法工作-为什么
- Jquery简单脚本只能在本地工作.为什么?像Javascript翻译
- 可以't让jQuery循环插件工作为什么
- jQuery animate(）不工作.为什么?
- window.onload没有'I don’我不能一直工作.为什么?
- Rails自动完成可以在父形式中工作，但不能在嵌套形式中工作.为什么
- LESS不能在IE11中工作-为什么
- ECMAScript的承诺.all方法与jQuery.Deferred一起工作.为什么
- 防止LinkButton post回OnClientClick不工作.为什么
- JavaScript toUpperCase不工作.为什么
- html5:帆布.getImageData不能正常工作-为什么
- javascript的内联样式更改不能在移动浏览器(chrome/dolphin/android)上工作:为什么?
- 为什么我的幻灯片不能工作?为什么我的照片消失了
- jQuery验证在服务器中不起作用！在本地工作.为什么?
- 单页导航无法正常工作.为什么
- AJAX: error(已弃用!)工作，而failed不工作.为什么
- d3选择器:可以在代码中工作，但不能在控制台中工作.为什么
