Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Gilberto Jr

Problemas Ancora FireFox e IE

Por , em Javascript

Recommended Posts

Gilberto Jr    26

Gilberto Jr
Postado

Boa tarde;

 

Eu criei essa pagina com ANCORAS do HTML5. Porem esse código não esta funcionando no MOZILLA FIREFOX e no IE.

 

Segue o código da minha pagina caso queiram fazer testes.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>..::KW AMBIENTAL::..</title>
<link href="css/estilo.css" rel="stylesheet" type="text/css" />

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js'></script>
 
<script type="text/javascript">
$(function() { 
    $(".scroll").bind('click',function(a){
        a.preventDefault();
        $('body').animate({scrollTop:$(this.hash).offset().top - $('#topoinicio').height()}, 800);
   });
});
</script>

<style type="text/css">
@charset "utf-8";
/* CSS Document */
*{
	padding:0px;
	margin:0px;
}
html,body{
	width:100%;
	height:100%;
}
#topoinicio{
	width:100%;
	height:auto;
	background:#000;
	margin-top:0px;
	z-index:80;
	position:fixed;

}
#topoinicio #conteudotopoinicio{
	width:1150px;
	height:40px;
	background:#fff;
	margin:auto;
}
#topoinicio #logomenu{
	width:100%;
	height:120px;
	background:#f4f4f4;
}
#topoinicio #logomenu #conteudologomenu{
	width:1150px;
	height:120px;
	background:#093;
	margin:auto;
}
#conteudo{
	width:100%;
	height:auto;
	background:#d4d4d4;
	position:absolute;
	margin-top:160px;
}
#conteudo #conteudoprincipal{
	width:100%;
	height:300px;
	background:#FC6;
}
#conteudo #conteudoprincipal #informacaoprincipal{
	width:1150px;
	height:300px;
	background:#F96;
	margin:auto;
}
#conteudo #mpi{
	width:1150px;
	height:400px;
	background:#66C;
	margin:auto;
}
#conteudo #casesucesso{
	width:1150px;
	height:450px;
	background:#966;
	margin:auto;
}
#conteudo #contato{
	width:1150px;
	height:500px;
	background:#F9F;
	margin:auto;
}
</style>

</head>

<body>
<!--INICIO MENU PRINCIPAL-->
<div id="topoinicio">

<div id="conteudotopoinicio">
</div>

<!--INICIO LOGO E MENU-->
<div id="logomenu">

<div id="conteudologomenu">
<a href="#informacaoprincipal" class="scroll">TESTE</a> | <a href="#mpi" class="scroll">O QUE É MPI</a> | <a href="#casesucesso" class="scroll">CASE DE SUCESSO</a> | <a href="#contato" class="scroll">CONTATO</a>
</div>

</div>
<!--FIM LOGO MENU-->

</div>
<!--FIM MENU PRINCIPAL-->




<div id="conteudo">
<!--INICIO CONTEUDO PRINCIPAL DA PAGINA INICIO-->
<div id="conteudoprincipal">

<div id="informacaoprincipal">
teste
</div>

</div>
<!--FIM CONTEUDO PRINCIPAL DA PAGINA INICIO-->


<!--INICIO QUEM MPI-->
<div id="mpi">
O QUE É MPI
</div>
<!--FIM QUEM MPI-->


<!--INICIO CASE SUCESSO-->
<div id="casesucesso">
CASE DE SUCESSO
</div>
<!--FIM CASE SUCESSO-->


<!--INICIO CONTATO-->
<div id="contato">
CONTATO DA KW AMBIENTAL
</div>
<!--FIM CONTATO-->

</div>
</body>
</html>

Desde Já agradeço.

 

Att;


Funcionou aqui. o codigo jquery estava assim

<script type='text/javascript' src='js/jquery.min.js'></script>
 
<script type="text/javascript">
$(function() { 
    $(".scroll").bind('click',function(a){
        a.preventDefault();
        $('body').animate({scrollTop:$(this.hash).offset().top - $('#topoinicio').height()}, 800);
   });
});
</script>

Eu coloquei assim e funcionou 

<script type='text/javascript' src='js/jquery.min.js'></script>
 
<script type="text/javascript">
$(function() { 
    $(".scroll").bind('click',function(a){
        a.preventDefault();
        $('html,body').animate({scrollTop:$(this.hash).offset().top - $('#topoinicio').height()}, 800);
   });
});
</script>

inclui a tag HTML junto com o BODY que esta no script do JQUERY.

Att;

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito